将 onclick 事件添加到 SVG 元素
Posted
技术标签:
【中文标题】将 onclick 事件添加到 SVG 元素【英文标题】：Add onclick event to SVG element 【发布时间】：2013-05-04 13:05:50 【问题描述】：我在 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>但是，这似乎不起作用。当我点击元素时没有任何反应。
也许值得一提的是，我使用echo 从 php 脚本中显示 SVG。另请注意，PHP 脚本生成的内容是使用 AJAX 和XMLHttpRequest() 带入页面的。
这可能与它有关吗？非常感谢您的帮助。
【问题讨论】：
你想完成什么？您的帖子似乎没有提出具体问题。 onclick 事件无效.. 当我点击元素时没有任何反应。我已经编辑了问题 什么都没有发生（2020 年），因为有一个TypeError: svgobj.getStyle is not a function。
【参考方案1】：
我们可以简单地给 svg 添加一个 onclick 事件
<img class="video-svg" id="play" onclick="playVid(id)" src="assets/img/logo/play svg.png">
然后我们可以给 css 来产生效果，因为我们需要给 position as absolute 和 z-index 给 200 这将使点击事件为 svg
2.
.video-svg
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 7%;
background: no-repeat;
border: none;
z-index: 200 !important;
width: 10% !important;
position: absolute !important;
【讨论】：
【参考方案2】：我遇到了同样的问题，关于将 z-index 放在 div 顶部的答案有帮助！
但是，我发现您不需要将 svg 包装在 div 中，只要定位父级，就可以将其 z-index 到顶部。
【讨论】：
【参考方案3】：向 svg 节点添加事件监听器：
let svgobj.addEventListener("click", myFunction);
【讨论】：
【参考方案4】：Demo in JSFiddle
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;
【讨论】：
【参考方案5】：似乎所有的 javascript 都必须包含在 SVG 中才能运行。我无法引用任何外部函数或库。这意味着你的代码在svgstyle = svgobj.getStyle(); 处被破坏了
这将做你正在尝试的。
<?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>【讨论】：
有很多方法可以引用外部函数，其工作方式与从 iframe 内部调用外部函数相同。这里有一些例子：dahlström.net/svg/html/from-svg-to-parent-html-script.html 和 dahlström.net/svg/html/from-svg-get-embedding-element.html。【参考方案6】：我建议将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)));
首先检查您的svgobj 在获取onclick 事件处理程序时是否传递给console.log。从那时起，您可以传递给任何函数来处理该元素。
您可以在此处的示例中查看它的工作原理：
https://jsfiddle.net/chetabahana/f7ejxhnk/20/
关于如何使用此示例的注意事项： - 将 SVG 图上的状态更改为 Printed 选项， - 单击其中一个元素，然后在控制台中查看输出。
【讨论】：
【参考方案7】：如果您不需要点击 svg 的特定部分，这可能是一个可能的解决方案：
在顶部放置一个 div 并向该 div 添加事件。如果 svg 元素在 html 结构中的 div 标签之前，则不需要 z-index。
HTML
<div class='parent'>
<div class='parent-events'></div>
<div class='my-svg'><svg></svg></div>
</div>
CSS
.parent
position: relative;
.my-svg
position: relative;
z-index: 0;
.parent-events
position: absolute;
width: 100%;
height: 100%;
z-index: 1
Javascript
const eventArea = document.querySelector('.parent-events');
eventArea.addEventListeners('click', () =>
console.log('clicked');
);
【讨论】：
【参考方案8】：确保将className/id 添加到<use>；或使用实际的 SVG 路径/元素，如果您在 SVG 脚本范围之外进行检测：
<svg rel='-1' class='**ux-year-prev**' style="border:0px solid"><use class='**ux-year-prev**' xlink:href="#svg-arrow-left"></use></svg>
【讨论】：
以上是关于将 onclick 事件添加到 SVG 元素的主要内容，如果未能解决你的问题，请参考以下文章
在 javascript 中的嵌入式 SVG 元素上添加点击事件