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>

在每个窗口点击后更新<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上运行。 Haven未经其他浏览器测试过。

Answer 1

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

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

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

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

1 个答案: