CODEWITHSUNDEEP
svg
klis87
klis87

Reputation: 506

Styling of external SVG file with symbols

I have problem with styles in following example:

external svg file file.svg:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style>.cls-1{fill:#333;fill-rule:evenodd;}</style>
    </defs>
    <symbol id="1" viewBox="0 0 24 32">
        <title>2</title>
        <path class="cls-1" d="M50,66S38,52.63,38,46a12,12,0,0,1,24,0C62,52.63,50,66,50,66Zm0-16a4,4,0,1,1,4-4A4,4,0,0,1,50,50Z" transform="translate(-38 -34)"/>
    </symbol>
</svg>

When I try to load it with below code, Chrome and Firefox do not respect cls-1 class, it works on Opera fine though.

<svg width="100px"><use xlink:href="file.svg#1"></use></svg>

If you are wondering why I need that, I have bunch of svg icons and I combined them with gulp-svgstore into single svg.file, so I have many symbols in my real file.

Upvotes: 3

Views: 1081

Answers (2)

Fabian von Ellerts
Fabian von Ellerts

Reputation: 5211

You should be able to use the all: inherit; CSS property inside the external SVG, which will allow styles on the use element to cascade down into the SVG: https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

Upvotes: 0

Kaiido
Kaiido

Reputation: 136796

That's a bug, according to SVG specs on <use> elements, styles applied on a referenced element should come along the deep clone, in W3 words :

For user agents that support Styling with CSS, the generated ‘g’ element carries along with it the "cascaded" property values on the ‘use’ element which result from the CSS cascade [...]. Additionally, the copy (deep clone) of the referenced resource carries along with it the "cascaded" property values resulting from the CSS cascade on the original (i.e., referenced) elements. Thus, the result of various CSS selectors in combination with the ‘class’ and ‘style’ attributes are, in effect, replaced by the functional equivalent of a ‘style’ attribute in the generated content which conveys the "cascaded" property values.

Mozilla's bugzilla does have a report from 2010 but nothing seems to have changed since.

I don't know which version of Opera you do use, but on v34.0 on osX, it doesn't work either.

Your best bet is to workaround this problem, by setting the styles of your symbols inline.

Note that in Firefox and Safari, if you do append your <style> element in the main document, then the class selector will work correctly, unfortunately, Blink (chrome+opera) doesn't do it well...

Upvotes: 3

Related Questions