Dom 更新SVG元素的转换时，Firefox会移动剪辑路径，而Chromium不会'；t-哪一个是正确的，什么是可移植的解决方案？

Firefox和Chromium在更新剪裁SVG元素的转换时有不同的行为。Firefox会移动剪辑路径，而Chromium不会

示例代码：

点击翻译


var b=document.getElementById（'button'）；
var g=document.getElementById（'group'）；
b、 onclick=函数（事件）{
g、 setAttribute（'transform'，'translate（0,0'）；
};

JSFiddle：

最外面的

g

元素按照边长为50的正方形进行剪裁。要确定在什么坐标处放置剪裁多边形，浏览器似乎会找到包含要渲染内容的矩形的左上角。由于有一个内部

g

元素（25,25）在（0,0）处包含

rect

，因此剪裁多边形被放置在（25,25）处

单击按钮时，内部

g

元素的转换将更改为（0，0）

当点击按钮时，Firefox和Chromium有不同的行为。在Firefox中，剪辑路径的位置会相应更改，以匹配矩形的新位置。在Chromium中，它不是，导致矩形的一部分被剪裁。我已经用Firefox 66.0.2和Chromium 73.0.3683.86测试了代码

根据规范，哪种行为是正确的行为

---

我想剪辑一个以编程方式转换的元素。考虑到Firefox和Chromium似乎有不同的行为，有什么解决方案可以让我跨浏览器工作？

我首先定义clipPath：

<clipPath id="poly">
   <polygon points="0 0, 50 0, 50 50, 0 50"></polygon>
</clipPath>

svg{border:1px solid}

点击翻译

我认为Firefox是对的。实际上，我认为两者都是错的@enxaneta使用SVG的解决方案显示了应该发生什么。

 <g clip-path="url(#poly)">