使用onclick使svg图像对象可单击,避免绝对定位

Question

我试图将我网站上的图像更改img为svg,更改img标签embed和object标签.但是,实现onclick之前包含在img标签中的功能是最困难的.

我发现onclick放在object或embed标签内没有任何影响.

所以,我div专门为svg 做了一个,放在onclick这个div标签里.但是,除非访问者点击图像的边缘/填充,否则无效.

我已经阅读了有关覆盖a的内容div,但我正试图避免使用absolute定位或指定position.

有没有其他方法可以将onclick应用于svg？

有谁遇到过这个问题？欢迎提出问题和建议.

Answer 1

你可以在svg本身有一个onclick事件,我在工作中一直这样做.在svg的空间上做一个矩形,(最后定义它,记住svg使用画家模型)

rect.btn {
  stroke:#fff;
  fill:#fff;
  fill-opacity:0;
  stroke-opacity:0;
}

然后作为rect的一个属性添加onclick(这也可以用js或jquery完成).

<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g>
    <circle ... //your img svg
    <rect class="btn" x="0" y="0" width="10" height="10" onclick="alert('click!')" />
  </g>
</svg>
</div>

这将适用于大多数现代浏览器,http://caniuse.com/svg ...但如果您需要交叉兼容性,则可以实施Google Chrome Frame.http://www.google.com/chromeframe

Answer 2

如果您只是使用内联 svg，则没有问题。

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
  <circle id="circle1" r="30" cx="34" cy="34" onclick="circle1.style.fill='yellow';"
            style="fill: red; stroke: blue; stroke-width: 2"/>
  </svg>
  

Answer 3

如果您愿意将 svg 包装在另一个元素中（a例如）并放在onclick包装器上，svg {pointer-events: none;}CSS 就可以解决问题。

Answer 4

这开始是对RGB解决方案的评论,但我无法适应它所以已将其转换为答案.其灵感完全是RGB的.

RGB的解决方案对我有用.不过,我想指出几个可以帮助别人,在这个帖子到达(像我)谁不那么熟悉点的其中SVG和谁很可能已经产生从图形包的SVG文件(像我).

因此,为了应用我使用的RGB解决方案:

CSS

 <style>
    rect.btn {
        stroke:#fff;
        fill:#fff;
        fill-opacity:0;
        stroke-opacity:0;
    }
</style>

jquery脚本

<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>   
<script type="text/javascript">
   $("document").ready(function(){
       $(".btn").bind("click", function(event){alert("clicked svg")});
   });
</script>

用于将预先存在的SVG文件包含在SVG代码内的组标记中的HTML代码.

<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g>
     <image x="0" y="0" width="10" height="10"
     xlink:href="../_public/_icons/booked.svg" width="10px"/>
    <rect class="btn" x="0" y="0" width="10" height="10"/>

  </g>
</svg>
</div>

但是,在我的情况下,我有几个SVG图标,我希望可以点击,并将这些中的每一个合并到SVG标签开始变得麻烦.

因此,作为我可以使用类的替代方法,我使用了jquery.svg.这可能是这个插件的一个可耻的应用程序,它可以用SVG做各种各样的事情.但它使用以下代码:

<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>       
<script type="text/javascript" src="jquery.svg.min.js"></script>
<script type="text/javascript">
    $("document").ready(function(){
        $(".svgload").bind("click", function(event){alert("clicked svg")});

         for (var i=0; i < 99; i++) {
           $(".svgload:eq(" + i + ")").svg({
              onLoad: function(){
              var svg = $(".svgload:eq(" + i + ")").svg('get');
              svg.load("../_public/_icons/booked.svg", {addTo: true,  changeSize: false});        
              },
              settings: {}}
          ); 
        } 
    });
</script>

哪里的HTML

<div class="svgload" style="width: 10px; height: 10px;"></div>

我的想法的优点是我可以在需要图标的地方使用适当的类,并且在HTML的主体中避免了相当多的代码,这有助于提高可读性.而且我只需要将预先存在的SVG文件合并一次.

编辑: 这是一个更简洁的脚本版本由Keith Wood提供:使用.svg的加载URL设置.

<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>       
<script type="text/javascript" src="jquery.svg.min.js"></script>
<script type="text/javascript">
    $("document").ready(function(){

      $('.svgload').on('click', function() {
          alert('clicked svg new');
      }).svg({loadURL: '../_public/_icons/booked.svg'});

    });
</script>

Answer 5

我在最新版本的 Firefox、Chrome、Safari 和 Opera 上都能正常工作。

它依赖于具有绝对位置并设置宽度和高度的对象之前的透明 div，因此它覆盖下面的对象标签。

在这里，我有点懒惰并使用了内联样式：

<div id="toolbar" style="width: 600px; height: 100px; position: absolute; z-index: 1;"></div>
<object data="interface.svg" width="600" height="100" type="image/svg+xml">
</object>

我使用以下 JavaScript 将事件连接到它：

<script type="text/javascript">
    var toolbar = document.getElementById("toolbar");
    toolbar.onclick = function (e) {
        alert("Hello");
    };
</script>

Answer 6

您是否考虑过使用 CSSz-index属性使容器开发位于 svg 的“顶部”？因为 div（大概）是透明的，所以您仍然会像以前一样看到图像。

我相信，这是解决问题的最佳实践、非黑客、预期方法。仅对具有、、 或如您所听过的属性的z-index元素有用。但是，您实际上不必移动该对象。positionfixedrelativeabsolute

例如：

<style>
    .svgwrapper {
        position: relative;
        z-index: 1;
    }
</style>
<div class="svgwrapper" onClick="function();">
    <object src="blah" />
</div>

就其价值而言，根本不使用 onClick 而是使用 javascript 绑定 click 事件也会更加优雅和安全。但这完全是另一个问题。