使用 CSS 设置 SVG 样式时遇到问题？

Question

嗨，我是 SVG 的新手，但我认为 SVG 的全部想法是您可以更改背景颜色等。无论如何，我使用的是开源 clrs.cc 并且它同时具有 svg内置填充和描边，但 none 在我的搜索图标上有效。

<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 只能影响页面 inline SVG HTML.

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 样式时遇到问题？

Having trouble styling SVG with CSS?

html

css

svg