Question

我有一个svg

tick.svg：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px" viewBox="0 0 200 200"><circle cx="150" cy="150" r="40" stroke="#000" fill="none" stroke-width="6" class="tickCol" stroke-linecap="round></svg>

我用它作为

#checkBox{
    background: url('tick.svg') 50% 50% no-repeat #000;
}

我需要使用css更改笔触颜色。我尝试了以下但没有运气。如何更改css中的stroke颜色？

.tickCol{
  stroke: #f60;
}

Answer 1

如果您想使用CSS来设置SVG的各个部分的样式，您应该使用SVG内联而不是将SVG文件作为背景图像加载。

Chris Coyier写了一篇名为Using SVG的文章，它很好地概述了使用SVG的不同方法以及每种方法的局限性。

Here's a pen我制作了一个简单的内联SVG，并应用了一些基本样式。除了更改stroke和fill属性之外，您还可以将各种样式应用于内联SVG，无论形状有多复杂。

<!-- HTML -->

<svg width="720" height="120">
  <circle class="foo" cx="90" cy="60" r="40"></circle>
  <circle class="bar" cx="180" cy="60" r="40"></circle>
  <circle class="baz" cx="270" cy="60" r="40"></circle>
</svg>

/* CSS */

.foo {
  /* default styles */
}
.bar {
  fill: blue;
}
.baz {
  fill: red;
  stroke: blue;
}

希望这有帮助！

更新笔触颜色css

1 个答案: