i have problem 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 try load below code, chrome , firefox not respect cls-1 class, works on opera fine though.
<svg width="100px"><use xlink:href="file.svg#1"></use></svg> if wondering why need that, have bunch of svg icons , combined them gulp-svgstore single svg.file, have many symbols in real file.
that's bug, according svg specs on <use> elements, styles applied on referenced element should come along deep clone, in w3 words :
for user agents support styling css, generated ‘g’ element carries along "cascaded" property values on ‘use’ element result css cascade [...]. additionally, copy (deep clone) of referenced resource carries along "cascaded" property values resulting css cascade on original (i.e., referenced) elements. thus, result of various css selectors in combination ‘class’ , ‘style’ attributes are, in effect, replaced functional equivalent of ‘style’ attribute in generated content conveys "cascaded" property values.
mozilla's bugzilla have a report 2010 nothing seems have changed since.
i don't know version of opera use, on v34.0 on osx, doesn't work either.
your best bet workaround problem, setting styles of symbols inline.
note in firefox , safari, if append <style> element in main document, class selector work correctly, unfortunately, blink (chrome+opera) doesn't well...
Comments
Post a Comment