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

我尝试将我网站上的图像从

img

更改为

svg

，将

img

标记更改为

embed

和

object

标记。但是，实现以前包含在

img

标记中的

onclick

函数被证明是最困难的

我发现

onclick

放在

object

或

embed

标记中时没有效果

因此，我专门为svg制作了一个

div

，并将

onclick

放在这个

div

标记中。但是，除非访问者单击图像的边缘/填充，否则不会产生任何效果

我已经读过关于叠加

div

，但是我试图避免使用

绝对定位，或者根本不指定
位置

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

有人遇到过这个问题吗？欢迎提出问题和建议。
您是否考虑过使用CSS
z-index
属性使容器开发处于svg的“顶部”？因为div（大概）是透明的，所以您仍然可以像以前一样看到图像

我相信，这是解决您的问题的最佳实践、非黑客、有意的方式<代码>z索引
仅对具有
位置
属性的元素有用，该属性为
固定
、
相对
，或者，如您所知，
绝对
。但是，实际上不必移动对象

例如：

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

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


svgwrapper先生{
位置：相对位置；
z指数：1；
}

值得一提的是，完全不使用onClick，而是使用javascript绑定click事件会更优雅、更安全。不过，这完全是另一个问题。
假设您不需要跨浏览器支持（如果没有IE插件，这是不可能的），您是否尝试过使用

当然是实验性的东西，但我想我会提到它。
我通过最新版本的Firefox、Chrome、Safari和Opera实现了这一点

它依赖于对象前面的透明div，该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>


var toolbar=document.getElementById（“toolbar”）；
toolbar.onclick=函数（e）{
警惕（“你好”）；
};
您可以在svg本身中有一个onclick事件，我在工作中一直都是这样做的。在svg的空间上做一个矩形（所以最后定义它，记住svg使用painters模型）

然后作为rect的一个属性添加onclick（这也可以通过js或jquery实现）


您可以使用以下代码：

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

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

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


svgwrapper先生{
位置：相对位置；
}
svgwrapper先生{
位置：绝对位置；
z指数：-1；
}

b3ng0编写了类似的代码，但不起作用。父级的z索引必须是自动的。
这是作为对RGB解决方案的评论开始的，但我无法将其放入，因此我将其转换为答案。其灵感完全来自RGB

RGB的解决方案对我有效。但是，我想指出两点，这可能有助于其他人（如我）了解这篇文章，他们不太熟悉哪种SVG，并且很可能已经从图形包生成了他们的SVG文件（如我所做的）

因此，为了应用我使用的RGB解决方案：

CSS

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


rect.btn{
冲程：#fff；
填充：#fff；
填充不透明度：0；
笔画不透明度：0；
}

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>


$（“文档”）.ready（函数（）{
$（“.btn”）.bind（“单击”，函数（事件）{alert（“单击的svg”）}）；
});

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做各种事情。但它使用以下代码工作：

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

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

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


$（“文档”）.ready（函数（）{
$（“.svgload”）.bind（“单击”，函数（事件）{alert（“单击的svg”）}）；
对于（变量i=0；i<99；i++）{
$（“.svgload:eq（“+i+”）.svg({
onLoad:function（）{
var svg=$（“.svgload:eq（“+i+”））.svg（'get'）；
load（“../\u public/\u icons/booked.svg”，{addTo:true，changeSize:false}）；
},
设置：{}
); 
} 
});

哪里有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>


$（“文档”）.ready（函数（）{
$（'.svgload'）。在（'click'，function（）上{
警报（“新建”）；
}).svg（{loadURL:'../\u public/\u icons/booked.svg'}）；
});
只需将
标记替换为


这并没有回应点击，我写道：

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



它在Internet Explorer和Google Chrome中工作，我希望在其他浏览器中也能工作。
也许您要查找的是SVG元素的指针事件属性，您可以在

您可以使用CSS设置SVG元素在被单击时会发生什么，等等。
嵌入时
var object = /* get DOM node for <object> */;
var svg = object.contentDocument.rootElement;
svg.addEventListener('click', function() {
  console.log('hooray!');
});