Question

我试图理解css样式在svg中是如何工作的，这是svg的例子，我使用：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

显然，我对如何将内联样式转换为CSS样式有所了解，我猜我的问题就在这里：.cls-1{isolation:isolate;}.cls-2, 我必须要为课程cls-2指定一些内容，但没有设法解决这个问题。

感谢您的任何澄清，如果已经提出的问题无法找到任何相关内容，请致谢。

Matth

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

理解svg css style

1 个答案: