SVG元素在转换后会丢失事件侦听器

SVG elements lose event listeners after transform

本文关键字：失事 事件 侦听器 元素 转换 SVG      更新时间：2023-09-26

当以编程方式更改父<svg>转换属性时，我得到了内部SVG元素的一些奇怪行为。更改后，css选择器（如:hover）和javascript侦听器（onClick）都无法工作。

这里有一个例子：

  • 包含<circle>元素的简单<svg>：

    <svg width="200" height="200">
    <circle cx="30" cy="30" fill="white" stroke="black" stroke-width="1" r="20" onClick="alert('clicked')">
    </circle>
</svg>

  • 每次点击窗口后更新<svg>转换属性的JS代码：

    var svg = document.getElementsByTagName('svg')[0]
var x = 0
window.onclick = function() {
  svg.setAttribute('transform', 'translate(' + x + ',' + x + ')')
  x += 3
}

https://jsfiddle.net/ohpaaevt/6/

有人能解释一下吗？

EDIT：我刚刚注意到在<svg>上应用transform属性甚至在Chrome上都不起作用，只在Firefox上起作用。尚未使用其他浏览器进行测试。

<svg>元素上的转换是SVG 2的一个新功能，只有Firefox实现了它。在SVG 1.1中，<svg>元素不支持具有转换属性。

SVG 2是一个新规范，目前尚未完成。Chrome、Firefox和IE Edge已经实现了它的不同部分

为了解决Chrome中缺乏支持的问题，请创建<svg>的<g>子级，并将<svg>的所有内容移动到<g>元素中，然后转换<g>元素而不是<svg>元素。

相关文章：