javascript - SVG 元素在变换后丢失事件监听器

Question

当家长<svg>变换属性以编程方式更改，我得到了内部 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>
  

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

  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 上运行。尚未使用其他浏览器进行测试。

Answer 1

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

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

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