将 SVG 添加到 HTML 并处理事件答案

【问题标题】：Add SVG to HTML and handle events将 SVG 添加到 HTML 并处理事件
【发布时间】：2016-08-18 17:41:32
【问题描述】：

我有这个 SVG 文件。显示不同的 svg 元素（圆形、Eclipse、多边形、折线等）

每个元素都有自己的 ID。

我可以在单击特定 ID 时添加功能（onClick 或 MouseClicK）。

有没有办法添加一个通用函数（在 JavaScript 或 Jquery 中）响应点击事件并告诉我们点击来自哪个对象 (ID)？

所以我需要：

添加/引用 SVG 文件的 HTML 代码。不确定我使用的是 SVG 还是 Object 标签？哪一种适用于所有浏览器？
然后是响应鼠标点击元素的 JavaScript 的 JQuery 并告诉点击了哪个 ID？

如果您看到以下 SVG，它有不同的圆圈，具有 ID，例如01、02、03等

http://imgh.us/ClockControl.svg

【问题讨论】：

标签： javascript jquery html svg

【解决方案1】：

最简单的方法是将svg直接打印到html中。这样，每个 SVG 元素都是 DOM 的“真正的成员”。

<html>
    <head>
        …
    </head>
    <body>
        …
        <!-- 
           this stands for the content of »ClockControl.svg« 
           open it in a text editor, copy all the content, beginning at
           <svg and paste it into the html
        -->

        <svg id="your-svg">
            …
            <path id="e1" d="…" />
            …
        </svg>
    </body>
</html>

接下来是事件处理，可以做这样的事情（加载时）：

var svg = document.querySelector('svg#your-svg'),
    handlers = {
        'e1' : function(e){ … }
    };
svg.addEventListener('click', function(e) {
    var c = e.target;
    while (c !== svg) {
        if (c.hasAttribute('id') {
            var id = c.getAttribute('id');

            if (handlers.hasOwnProperty(id)) {
                handlers[id](c);
                break;
            } 
        }
        c = c.parentNode;
    }
});

FIDDLE

如果您不熟悉 SVG 插入 HTML 的所有方式，请查看 here。此答案中使用的方法称为 »inline SVG«。

【讨论】：

不工作。在哪里添加“ClockControl.SVG”？是否需要进入 d="..."？
看看小提琴，它正在运行……为了从 svg 中去除所有 inkscape 的东西，我建议使用 svg 清洁器
酷！谢谢菲利普。感谢 svg 清洁器的建议！

【解决方案2】：

您可以使用以下代码（只是普通的 JavaScript，不使用 jQuery），它会在页面中的每个 SVG 元素上添加一个事件侦听器 click。

document.querySelectorAll('svg').forEach(function(item){
item.addEventListener('click', function(event){alert('svg clicked was: ' + event.target.id)});
})

#circle{
  position:absolute;

}
#rect{
  position:absolute;
  left: 0;
  top: 100px;
  transform: translate(80px, 80px)
}

Click on one of the following SVG shapes.
<svg height="500" width="500">
  <circle id="circle"  cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
   <rect id="rect" width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
  Sorry, your browser does not support inline SVG.
</svg>

【讨论】：

【解决方案3】：

你可以使用jQuery来获取id

$('svg').click(function(){
alert('element ID is: '+this.id);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<svg id="1" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg id="2" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="blue" />
</svg>

【讨论】：

这将是一个具有多个 ID 的 SVG 文件。我可以单独处理事件尝试探索是否有更好的方法！我还看到有多种方法可以将 SVG 文件添加到 HTML...（
我给你写了一个技术来找到哪个 id 被点击了，当然如果你单独处理每个事件，它会占用更少的资源，但更多的代码工作。这是一篇关于不同格式及其浏览器支持的好文章css-tricks.com/using-svg，这是支持我使用的方法的浏览器（HTML5）caniuse.com/#feat=svg-html5