Hello there,
I have a collection of SVG files that I need to dynamically modify the fill color of, preferably using CSS.
Here is the structure:
<div>
<svg width="100%" height="100%" viewbox="0 0 64 64" preserveAspectRatio="xMinYMin meet">
<image xlink:href="http://imgh.us/export_1.svg" width="64" height="64" />
</svg>
</div>
This is how the CSS code looks:
div {
width: 64px;
height: 64px;
}
svg, svg * {
fill: #000000 !important;
}
And here's a snippet of the SVG markup:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="72.121px" height="59.209px" viewBox="0 0 72.121 59.209" enable-background="new 0 0 72.121 59.209" xml:space="preserve">
<g>
...
</svg>
If you want to see it in action, check out this fiddle.
The issue lies in the fact that the fill color specified in the CSS isn't being applied to the SVG files due to them being separate documents.
Unfortunately, editing the SVG files directly is not an option for me at the moment.
Is there a workaround for this problem and if so, what would it entail?