CODEWITHSUNDEEP
cssfirefoxsvgcss-transforms
Kristen Grote
Kristen Grote

Reputation: 2777

Firefox Doubles Transform Values on Inline SVG Elements

I'm using inline SVG with the <use> element like so:

<a href="/">
    <svg><use xlink:href="#icon-home"></use></svg>
</a>

On hover, I have a transform animation applied to the SVG (prefixes omitted for simplicity):

a:hover svg {
    transform: translateX(10px);
}

This works fine and dandy on every browser except Firefox. Instead of moving the SVG 10 pixels it moves 20 pixels. The same happens with a rotate value. If the rotate is set to 180 degrees Firefox will rotate the SVG 360 degrees.

Here's a Codepen: http://codepen.io/kgrote/pen/ZBKXMO

This only happens with inline SVG elements. I figure it has something to do with the SVG element having a second nested <use> tag.

How do I get Firefox to transform inline SVG correctly? Is this a Firefox bug that should be reported?

Upvotes: 0

Views: 315

Answers (2)

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7051

Why not just write the <use> tag as a self-closing tag. Then it will work cross browser:

<use xlink:href="#icon-home" />

Like this:

<a href="/">
   <svg><use xlink:href="#icon-home" /></svg>
</a>

See W3C spec for <use>

https://www.w3.org/TR/SVG11/struct.html#UseElement

See MDN (Mozilla Developer Network) <use>

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

Upvotes: 0

cr1msaun
cr1msaun

Reputation: 717

I suppose Firefox sees nested <use> tag as a second <svg> inside a <svg>. So it goes like this:

<svg>
    <use xlink:href="#icon-home">
        <svg></svg>
    </use>
</svg>

First it applies transform to the first svg element and then to the second pseudo-svg. You could use :first-child selector to make everything work. Here is the working example http://codepen.io/anon/pen/xgVGNW.

Upvotes: 3

Related Questions