SVG 翻译似乎在 Chrome/Chromium 中表现不同 [英] SVG translate seems to behave different in Chrome/Chromium
本文介绍了SVG 翻译似乎在 Chrome/Chromium 中表现不同的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
https://jsfiddle.net/Lpfa9umq/
代码:
<svg>
<symbol>
<circle id="circle1" cx="50" cy="50" r="20" stroke="black" stroke-width="1" />
<circle id="circle2" cx="25" cy="25" r="10" stroke="red" fill="red" stroke-width="1" />
</symbol>
</svg>
<svg width="100" height="100">
<use xlink:href="#circle1" />
<svg width="50" height="50" transform="translate(20, 10)">
<use xlink:href="#circle2" />
</svg>
</svg>
transform 属性适用于 Firefox,但不适用于 Chrome/Chromium,为什么?我用错了吗?
The transform attribute is applied in Firefox, but not in Chrome/Chromium, why? Am I using it wrong?
推荐答案
在
中会混淆浏览器.而是使用
标签.
<svg>
within <svg>
is confusing the browser. Instead use <g>
tag.
<g transform="translate(20, 10)">
<use xlink:href="#circle2" />
</g>
这篇关于SVG 翻译似乎在 Chrome/Chromium 中表现不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文