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

【问题标题】：SVG elements lose event listeners after transformSVG 元素在转换后丢失事件侦听器
【发布时间】：2016-05-09 16:08:54
【问题描述】：

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

这是一个例子：

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

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

有人能解释一下吗？

编辑：我刚刚注意到在<svg> 上应用转换属性甚至在 Chrome 上都不起作用，只能在 Firefox 上使用。没有在其他浏览器上测试过。

【问题讨论】：

在你需要的小提琴中有语法错误 ' 而不是 ` 在 setAttribute 的几个地方
您能在帖子中包含您的代码吗？站外链接不被视为良好的发布习惯。 - 另外，我认为您的意思是“失去”而不是“松散”。
@RobertLongson 我使用了 ES6 字符串模板。这是没有它们的版本jsfiddle.net/ohpaaevt/6
@evolutionxbox 感谢您的通知。我添加了一些代码和解释。
谢谢。非常感谢。另外，我看不到你给你的变换是什么单位......

标签： javascript svg transform

【解决方案1】：

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

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

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

【讨论】：