使用内联CSS更改SVG图标颜色

Question

我对SVG相当陌生，但我该如何使用内联CSS显示SVG图标并更改其颜色呢？例如，如果我想将example.svg的颜色更改为＃FFF000，我应该怎么做？

我尝试在网上搜索，但没有找到有用的信息。

- lancey

Answer 1

collinksmith回答了你的问题，但没有解释CSS无法更改.svg文件的颜色。您需要将SVG内联，然后才能对其应用CSS。

- goodjobjohn

---

如果您想添加一些内容或完整描述，可以编辑该答案。 - Mohammad Reza Shahrestani

^^^^^这是答案。 - Geri Dremák

Answer 2

你需要使用 svg 的 path 标签下的 fill 属性。假设有一个带有 class 的 svg html 元素：

.class-name path {
  fill: red;
}

编辑 这里是一个例子：https://jsfiddle.net/4447zb7o/

编辑2 要将 CSS 设置为内联，更改 SVG 中 path 元素的 style 属性：

<svg class="my-svg" height="210" width="400">
  <path style="fill: green" d="M150 0 L75 200 L225 200 Z" />
</svg>

- collinksmith

---

SVG元素可以放在img标签内吗？例如：.test path { fill: red; } <img class="test" src="https://abs.twimg.com/a/1450471907/img/t1/favicon.svg"> - lancey

@lancey 如果SVG位于img、object或iframe标签内部，则无法使用CSS访问它，因为它是另一个文档/文件/URI。 - G-Cyrillus

我有点困惑，如果你在服务器上的一个文件夹中存储了一个SVG图标，那么该如何设置SVG文件路径呢？ - lancey

@lancey 在GCyrillus所说的基础上，可以查看这里的“<img>和background-image的问题”部分（https://css-tricks.com/using-svg/）。 - collinksmith

谢谢您提供的示例，但是您所给出的示例是用于创建形状路径而不是从svgimages/example.svg获取图像，显示它，然后更改它的颜色。我希望我的意思能够理解。 - lancey