SVG translate seems to behave different in Chrome/

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

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

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

Answer 2

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. The majority are not implemented at all and a few features are implemented by both. The SVG 2 specification itself is unfinished.

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.