如何使用CSS为SVG着色而不指定所有基本形状？

Question

使用CSS我能够为SVG图形着色如下：

svg polygon, svg line, svg polyline, svg path, svg mesh, svg rect, svg circle, svg ellipse {
        fill: Gray;
}

是否有更短的方法可以避免指定所有SVG基本形状？有SASS的任何解决方案？

Answer 1

对于sass解决方案，您可以使用mixin：

@mixin style-svg {
    svg {
        polygon,
        line,
        polyline,
        path,
        mesh,
        rect,
        circle,
        ellipse {
            @content;
        }
    }
}

然后像

一样使用它

@include style-svg {
    fill: gray;
}

Answer 2

您可以将类名添加到svg对象（如path，g，text），并使用类名中的一些（而非所有svg值）创建css样式。其余的你可以添加到该对象的样式。

.line {
  stroke: #000;
  stroke-width: 1px;
  fill: none;
}

<path d="m490,130 L473,110" class="line" style="marker-end: url(#markerArrow);"></path>

我希望有所帮助。