Chrome / Chromium中的SVG翻译似乎有所不同 [英] SVG translate seems to behave different in Chrome/Chromium

问题描述

https://jsfiddle.net/Lpfa9umq/

代码：

 < svg> 
<符号> 
  < / symbol> 
< / svg> 
< svg width =100height =100> 
< use xlink：href =＃circle1/> 
< svg width =50height =50transform =translate（20，10）> 
< use xlink：href =＃circle2/> 
< / svg> 
< / svg> 
  

transform属性适用于Firefox，但不适用于Chrome / Chromium，为什么？

code>< svg> 令浏览器感到困惑。请使用< g> 标签。

 < g transform = translate（20，10）> 
< use xlink：href =＃circle2/> 
< / g> 
  

https://jsfiddle.net/Lpfa9umq/

Code:

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

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>

这篇关于Chrome / Chromium中的SVG翻译似乎有所不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！