OpenLayers Icon className SVG - Change Fill Via CSS? - css

Question

I'm trying to use CSS classes in openlayers to change an svg fill colour:
eg say in open layers I have
style = new Style({
image: new Icon({
src: styleConfig.image.src,
scale: styleConfig.image.scale,
offset: [styleConfig.offsetX, styleConfig.offsetY],
className: 'icon--blue'
}),
zIndex: styleConfig.zIndex
});
and then I have an SVG like so:
<svg xmlns="http://www.w3.org/2000/svg" width="49" height="44" viewBox="0 0 580 515" class="icon--blue"><circle fill="inherit" cx="475" cy="106.9" r="102.9"/><g class="cat"><circle fill="inherit" cx="475" cy="106.9" r="102.9"/></g></svg>
and some CSS like so:
.icon--blue circle {
fill: #0000ff !important;
}
.icon--blue .cat {
display: none;
}
Try as I might I cannot get the css based fill effect to be applied. I was wondering if this is supported?
Also the hiding of the grouping with the class name of "cat" also doesn't work.
Seeing is OpenLayers is rendering to canvas, debugging this kind of stuff is very difficult.

Answer 1

Start with a Proof of Concept SVG in a JSFiddle or CodePen, to get your SVG and CSS selectors right.
Learn CSS Specificity to understand why the .inner circle below is green and not red;
Most likely no need for fill attribute and hardly ever !important
<style>
svg {
width: 25%;
}
circle {
fill: green;
stroke: red;
}
#outer {
fill: blue;
}
.inner {
fill: red;
}
.hidden {
display: none;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<circle id="outer" cx="10" cy="10" r="8" />
<g class="inner">
<circle cx="10" cy="10" r="4" />
</g>
<circle class="hidden" cx="15" cy="15" r="4" />
</svg>