了解svg css样式

Question

我正在尝试理解css样式是如何在svg中工作的，下面是我正在使用的svg的一个示例：

​

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">  <defs>
  <style>.cls-1{isolation:isolate;}.cls-2,.cls-3{fill:#ef8989;}.cls-3{mix-blend-mode:screen;}</style>
 </defs>
 <title>アセット 2</title>
 <g class="cls-1">
 <g id="レイヤー_2" data-name="レイヤー 2">
 <g id="レイヤー_1-2" data-name="レイヤー 1">
 <polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/><polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/>
 <polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/>
 </g>
 </g>
 </g>
</svg>

​

下面是我尝试将内联样式移动到外部css文件的方法：

​

.cls-1 {
  isolation : isolate;
}
.cls-3 {
  mix-blend-mode : screen;
  fill : #ef8989;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
 <g class="cls-1">
  <polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/>
  <polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/>
  <polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/>
 </g>
</svg>

​

显然，在如何将内联样式转换为CSS样式方面，我有一些不理解的地方，我猜我的问题在这里：.cls-1{isolation:isolate;}.cls-2,我必须为类cls-2指定一些东西，但没有设法弄清楚这一点。

感谢您的任何澄清，如果问题已经被问过了，很抱歉我找不到任何关于它的东西。

马特

Answer 1

您忘记了填充颜色为.cls-2,。

CSS中以逗号分隔的选择器意味着它们都具有以下定义的样式。

​

.cls-1{
    isolation:isolate;
}

.cls-2,
.cls-3{
    fill:#ef8989;
}

.cls-3{
    mix-blend-mode:screen;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">  <defs>
 </defs>
 <title>アセット 2</title>
 <g class="cls-1">
 <g id="レイヤー_2" data-name="レイヤー 2">
 <g id="レイヤー_1-2" data-name="レイヤー 1">
 <polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/><polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/>
 <polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/>
 </g>
 </g>
 </g>
</svg>

​