SVG translate seems to behave different in Chrome/Chromium

Question

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?

Answer 1

In SVG 1.1 <svg> elements do not accept transform attributes. In SVG 2 it is proposed that they should.

Chrome and Firefox are experimenting with implementing proposed parts of the SVG 2 specification. Some things are implemented only by Firefox, and others only by Chrome. Many features are implemented by both and some by neither.

In this particular case Firefox has implemented the SVG 2 feature but Chrome has not.

You can achieve the same result in browsers that do not support this SVG 2 feature either by replacing the <svg> element by a <g> element or by creating an <svg> child element on the <g> element and putting the transform on the <g> element.

Answer 2

<svg> within <svg> is confusing the browser. Instead use <g> tag.

<g transform="translate(20, 10)">
    <use xlink:href="#circle2" />
</g>