Html 将 onclick 事件添加到 SVG 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16472224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add onclick event to SVG element
提问by biggdman
I found this example in a SVG tutorial that explains how you can use an onclickevent handler for a SVG element. It looks like the code below:
我在 SVG 教程中找到了这个示例，该教程解释了如何onclick为 SVG 元素使用事件处理程序。它看起来像下面的代码：
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>
<script type="text/ecmascript"><![CDATA[
function changerect(evt)
{
var svgobj=evt.target;
svgstyle = svgobj.getStyle();
svgstyle.setProperty ('opacity', 0.3);
svgobj.setAttribute ('x', 300);
}
]]>
</script>
<rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'
height='100' />
</svg>However, this doesn't seem to work. Nothing happens when I click on the element.
但是，这似乎不起作用。当我点击元素时没有任何反应。
Perhaps it is important to mention the fact that I am displaying the SVG from inside a PHP script, using echo. Also, note that the content generated by the PHP script is brought into the page using AJAX and XMLHttpRequest().
也许重要的是要提到我从 PHP 脚本内部显示 SVG 的事实，使用echo. 另请注意，PHP 脚本生成的内容是使用 AJAX 和XMLHttpRequest().
Could this perhaps have anything to do with it? Thanks a lot for any help.
这可能与它有关吗？非常感谢您的帮助。
回答by miah
It appears that all of the JavaScript must be included inside of the SVG for it to run. I was unable to reference any external function, or libraries. This meant that your code was breaking at svgstyle = svgobj.getStyle();
似乎所有的 JavaScript 都必须包含在 SVG 中才能运行。我无法引用任何外部函数或库。这意味着你的代码在svgstyle = svgobj.getStyle();
This will do what you are attempting.
这将完成您正在尝试的操作。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>
<script type="text/ecmascript"><![CDATA[
function changerect(evt) {
var svgobj=evt.target;
svgobj.style.opacity= 0.3;
svgobj.setAttribute ('x', 300);
}
]]>
</script>
<rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' />
</svg>回答by Godly Mathew
var _reg = 100;
var _l = 10;
// Create PATH element
for (var x = 1; x < 20; x++) {
var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathEl.setAttribute('d', 'M' + _l + ' 100 Q 100 300 ' + _l + ' 500');
pathEl.style.stroke = 'rgb(' + (_reg) + ',0,0)';
pathEl.style.strokeWidth = '5';
pathEl.style.fill = 'none';
$(pathEl).mousemove(function(evt) {
$(this).css({ "strokeWidth": "3", "stroke": "#ff7200" })
.hide(100).show(500).css({ "stroke": "#51c000" })
});
$('#mySvg').append(pathEl);
_l += 50;
}
回答by Chetabahana
I would suggest this method of onclickevent handler for a svg element:
我建议onclick为 svg 元素使用这种事件处理程序方法：
var svgobj = parent_svg.find('svg')[0].children;
for (i = 0; i < svgobj.length; i++) {
element = svgobj[i];
element.style = "cursor: pointer;";
$(element).click(function(evt){console.log($(this))});
}
Cek first whether your svgobjis passed to console.logwhen it is getting an onclickevent handler. From that point you can pass to whatever functions to handle the element.
首先检查您是否在获取事件处理程序时svgobj传递给。从那时起，您可以传递给任何函数来处理元素。 console.logonclick
You may see on how it is working at a sample here:
您可以在此处查看示例中的工作方式：
https://jsfiddle.net/chetabahana/f7ejxhnk/20/
https://jsfiddle.net/chetabahana/f7ejxhnk/20/
Note on how to use this sample:
- Change the status on the SVG Diagram to Printedoption,
- Click one of the element then cek the output in your console.
有关如何使用此示例的注意事项：
- 将 SVG 图表上的状态更改为已打印选项，
- 单击元素之一，然后在控制台中查看输出。
回答by user3204205
Make sure to add className/idto <use>; or to use the actual SVG path/element also, if you're detecting outside of SVG script scope:
确保添加className/id到<use>; 或者也使用实际的 SVG 路径/元素，如果您在 SVG 脚本范围之外进行检测：
<svg rel='-1' class='**ux-year-prev**' width="15px" height="15px" style="border:0px solid"><use class='**ux-year-prev**' xlink:href="#svg-arrow-left"></use></svg>
回答by Michael Mammoliti
If you don't need to click specific parts of the svg this might be a possible solution:
如果您不需要单击 svg 的特定部分，这可能是一个可能的解决方案：
Put a div on top and add events to that div. z-index is not needed if the svg element is before the div tag in the html structure.
在顶部放置一个 div 并向该 div 添加事件。如果 svg 元素在 html 结构中的 div 标签之前，则不需要 z-index。
HTML
HTML
<div class='parent'>
<div class='parent-events'></div>
<div class='my-svg'><svg></svg></div>
</div>
CSS
CSS
.parent {
position: relative;
}
.my-svg {
position: relative;
z-index: 0;
}
.parent-events {
position: absolute;
width: 100%;
height: 100%;
z-index: 1
}
Javascript
Javascript
const eventArea = document.querySelector('.parent-events');
eventArea.addEventListeners('click', () => {
console.log('clicked');
});
