Question

您好我刚才使用SVG，但我认为SVG的全部想法是您可以更改背景颜色等。无论如何我使用开源clrs.cc，它内置了svg填充和笔画，但没有在我的搜索图标上工作。

<img src="ic_search_48px.svg" class="fill-navy" alt="This should be a search icon">

这是CSS类的样子：

.fill-navy {
 fill: #001F3F; }

感谢您的帮助！

Answer 1

基本上，您无法更改用作实际图像或背景图像的SVG的颜色。

CSS只会影响页面HTML中的内嵌 SVG。

EG。

.hidden {
  display: none;
}
.icon {
  width: 48px;
  height: 48px;
}
.large {
  width: 96px;
  height: 96px;
}
.red {
  fill: red;
}
.green {
  fill: green;
}

<svg xmlns="http://www.w3.org/2000/svg" class="hidden">
  <defs>
    <g id="search" viewBox="0 0 48 48">
      <path d="M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z" />
    </g>
  </defs>
</svg>

<svg class="icon" viewBox="0 0 48 48">>
  <use xlink:href="#search" class="red" />
</svg>

<svg class="icon large" viewBox="0 0 48 48">>
  <use xlink:href="#search" class="green" />
</svg>

额外阅读 - Article @ CSS-Tricks.com
另外 - SVG Icons @ CSS-Tricks.com

无法使用CSS设置SVG样式？

1 个答案: