CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxsvg
Andrew
Andrew

Reputation: 794

SVG's not inheriting values from parent

So this seems to be a bug that just cropped up in Chrome today (and Firefox apparently).
I have an SVG wrapped inside a span (I've tried div's and object tags as well, it doesn't seem to matter), and that span has a specified height and width. Yesterday, the child element would size itself appropriately to the full dimensions of it's parent, as every other html element does. However, now, that SVG element is not getting the inherited size from its parent, and is sizing itself based off the actual size of the SVG.
Check out the fiddle here: http://jsfiddle.net/theandybob/4LHeB/
The CSS:

.icon-small {
   width: 32px;
   height: 32px;
   position: relative;
   display: inline-block;
}

And the Code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="run-import" viewBox="0 0 48 48">
        <path fill="#4B4B4B" d="M24,0c4.4,0,8.4,1.1,12,3.2s6.6,5.1,8.7,8.7c2.1,3.7,3.2,7.7,3.2,12s-1.1,8.4-3.2,12 c-2.1,3.7-5.1,6.6-8.7,8.7c-3.7,2.1-7.7,3.2-12,3.2c-4.4,0-8.4-1.1-12-3.2c-3.7-2.1-6.6-5.1-8.7-8.7C1.1,32.4,0,28.4,0,24 s1.1-8.4,3.2-12S8.3,5.4,12,3.2S19.6,0,24,0z M36,25.7c0.7-0.4,1-0.9,1-1.7c0-0.8-0.3-1.3-1-1.7l-17-10c-0.6-0.4-1.3-0.4-2,0 c-0.7,0.4-1,1-1,1.8v20c0,0.8,0.3,1.4,1,1.8c0.3,0.2,0.7,0.3,1,0.3c0.4,0,0.7-0.1,1-0.3L36,25.7z"></path>
    </symbol>
</svg>

<span class="icon-small">
    <svg><use xlink:href="#run-import"></use></svg>
</span>

Now, this happens in Chrome (both on Windows and Mac), and Firefox, but not IE or Safari. Ideas on how to fix the issue, or where it came up from?
The only workaround I have now is to specifically set the svg size to inherit from it's parent.

Also, throwing the version numbers out there:
1. Chrome: Version 36.0.1985.125 m
2. Firefox: 30.0

Upvotes: 5

Views: 10099

Answers (1)

Robert Longson
Robert Longson

Reputation: 124109

You need height and width on the <svg> element which you can set using CSS if you wish but which I've set using attributes.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
    <symbol id="run-import" viewBox="0 0 48 48">
        <path fill="#4B4B4B" d="M24,0c4.4,0,8.4,1.1,12,3.2s6.6,5.1,8.7,8.7c2.1,3.7,3.2,7.7,3.2,12s-1.1,8.4-3.2,12 c-2.1,3.7-5.1,6.6-8.7,8.7c-3.7,2.1-7.7,3.2-12,3.2c-4.4,0-8.4-1.1-12-3.2c-3.7-2.1-6.6-5.1-8.7-8.7C1.1,32.4,0,28.4,0,24 s1.1-8.4,3.2-12S8.3,5.4,12,3.2S19.6,0,24,0z M36,25.7c0.7-0.4,1-0.9,1-1.7c0-0.8-0.3-1.3-1-1.7l-17-10c-0.6-0.4-1.3-0.4-2,0 c-0.7,0.4-1,1-1,1.8v20c0,0.8,0.3,1.4,1,1.8c0.3,0.2,0.7,0.3,1,0.3c0.4,0,0.7-0.1,1-0.3L36,25.7z"></path>
    </symbol>
</svg>

<span class="icon-small">
    <svg width="100%" height="100%"><use xlink:href="#run-import"></use></svg>
</span>

Upvotes: 8

Related Questions