OpenLayers Icon className SVG - 通过CSS改变填充颜色？

Question

我想在openlayers中使用CSS类来改变SVG的填充颜色。

例如，在openlayers中，我有

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
            });

然后我有一个SVG，像这样。

<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>

还有一些CSS，像这样

.icon--blue circle {
fill: #0000ff !important;
}
.icon--blue .cat {
display: none;
}

尽管我很努力，但我不能让基于CSS的填充效果被应用。我想知道是否支持这样做？

另外，隐藏类名为 "cat "的分组也不行。

看到的是OpenLayers是渲染到canvas上的，调试这种东西非常困难。

Answer 1

从JSFiddle或CodePen中的概念验证SVG开始，让你的SVG和CSS选择器正确。

了解更多 CSS特异性 以了解为什么 .inner 下面的圆圈是绿色而不是红色。

很可能不需要填充属性，也几乎不需要。!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>