Question

我尝试将我的网站上的图片从img更改为svg，将img代码更改为embed和object代码。但是，实现以前包含在onclick标记中的img函数证明是最困难的。

我发现onclick放置在object或embed标记内时无效。

因此，我专门为svg制作了div，并将onclick放在此div标记中。但是，除非访问者点击图像的边缘/填充，否则无效。

我已阅读有关覆盖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

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

RGB的解决方案对我有用。但是，我希望注意几点可能有助于其他人到达这个帖子（像我一样），他们不熟悉哪个SVG，谁可能很好地从图形包生成SVG文件（就像我一样）。 / p>

所以要应用我使用的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>

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

<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的加载网址设置。

<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 3

我使用了最新版本的Firefox，Chrome，Safari和Opera。

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

在这里，我有点懒惰，并使用内联styes：

<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 4

只需将<embed/>标记替换为<img/>并删除type属性即可。

例如，在我的代码中，而不是：

<embed src=\"./images/info_09c.svg\" type=\"image/svg+xml\" width=\"45\" onClick='afiseaza_indicatie($i, \"$indicatii[$i]\")'>

这不回应点击，我写道：

<img src=\"./images/info_09c.svg\" height=\"25\" width=\"25\" onClick='afiseaza_indicatie($i, \"$indicatii[$i]\")'>

它适用于Internet Explorer和Google Chrome，我希望在其他浏览器中也可以。

Answer 5

您可以使用以下代码：

<style>
    .svgwrapper {
        position: relative;
    }
    .svgwrapper {
        position: absolute;
        z-index: -1;
    }
</style>

<div class="svgwrapper" onClick="function();">
    <object src="blah" />
</div>

b3ng0写了类似的代码，但它不起作用。父级的z-index必须是auto。

Answer 6

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

＆＃13;

<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>

＆＃13;

Answer 7

您是否考虑过使用CSS z-index属性使容器dev成为svg的“顶部”？因为div（可能）是透明的，所以你仍然可以像以前一样看到图像。

我相信，这是解决问题的最佳实践，非黑客，有意的方式。 z-index仅适用于position属性fixed，relative的元素，或者，如您所听到的absolute。但是，您实际上不必移动对象。

例如：

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

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

Answer 8

假设您不需要跨浏览器支持（如果没有IE插件，这是不可能的），您是否尝试过使用svg as a background image？

实验性的东西肯定，但我想提一下。

Answer 9

也许您正在寻找的是SVG元素的指针事件属性，您可以在SVG w3C working group docs处阅读。

您可以使用CSS来设置单击SVG元素时发生的事情等等。

Answer 10

通过点击事件点击<g>中SVG的<object>元素。运作100％。看一下<svg>中的嵌套javascript。如果您要重定向父页面，请不要忘记插入window.parent.location.href=。

https://www.tutorialspoint.com/svg/svg_interactivity.htm

Answer 11

我将'svg'标签包裹在'a'标签中，并将onClick事件放置在'a'标签中

Answer 12

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

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

12 个答案: