Menu
I'm loading an SVG URL into a web page using a CSS class. This works in every browser I've tested except Firefox 35.0.1 (and probably earlier versions of Firefox). I've noticed that when using an actual color name, e.g., white, for the stroke, it works as expected, but when I use a hex value, e.g, #ffffff, it does not show a stroke at all. According to MDN, hex values are supported.
So, this works fine:
.ui-stroke-icon .ui-icon-head:after, background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 540" enable-background="new 0 0 540 540" xml:space="preserve"><path fill="none" stroke="white" stroke-width="8" stroke-miterlimit="10" d="...svg coordinates here..."/></svg> But this does not:
.ui-stroke-icon .ui-icon-head:after, background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 540" enable-background="new 0 0 540 540" xml:space="preserve"><path fill="none" stroke="#ffffff" stroke-width="8" stroke-miterlimit="10" d="...svg coordinates here..."/></svg> Is there any way I can use a hex value for the color here? This would really help keep my Sass as dry as possible.
341
Edit your SVG file, add fill="currentColor" to svg tag and make sure to remove any other fill property from the file. Note that currentColor is a keyword (not a fixed color in use). After that, you can change the color using CSS, by setting the color property of the element or from it's parent.
Basic coloring can be done by setting two attributes on the node: fill and stroke . Using fill sets the color inside the object and stroke sets the color of the line drawn around the object.
Edit your SVG file, add fill="currentColor" to svg tag and make sure to remove any other fill property from the file. Note that currentColor is a keyword (not a fixed color in use). After that, you can change the color using CSS, by setting the color property of the element or from it's parent.
The character # is reserved in URLs as the start of a fragment identifier. You must encode this as %23 for the URL to be valid. This is not a Firefox bug.
Alternatively you could encode the whole string using base64.
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
