使用 CSS 的 SVG 路径填充颜色答案

【问题标题】：SVG Path Fill Colour with CSS使用 CSS 的 SVG 路径填充颜色
【发布时间】：2013-07-23 15:33:59
【问题描述】：

我看到很多人都在发这个帖子，他们似乎都对自己的答案很满意。

但是我无法让我的路径填充实际工作，

fiddle在上面，svg是从Illustrator生成的

HTML

<img src="http://owenmelbourne.com/arrow.svg">

CSS

img {width: 100px}
path {
    fill: blue;
}

但我总是得到

SVG 代码看起来像

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="#999999" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
    c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
    c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

如果有人能对此事有所了解，将不胜感激。

谢谢

【问题讨论】：

您不能将任何来自外部的 CSS 应用到引用的 SVG 文件。在 SVG 中移动 CSS 或在 HTML 中使用内联 SVG。
那么它会按照这个答案工作：stackoverflow.com/a/9529444/1450420

标签： css svg fill

【解决方案1】：

在这种情况下更改填充属性永远不会起作用，因为图像本身已经具有填充。它不会使用新属性“替换”或“重绘”。

我也不认为即使你在 SVG 文件中取出颜色命令也行不通。

【讨论】：

【解决方案2】：

有两种方法可以完成。

删除填充属性 (fill="") 内的值并通过外部 CSS 进行修改
只需更改填充属性内的颜色值即可。

为了保持美观，删除所有多余的 g 标签，你不需要它们。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable- 
background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
</svg>

一旦您没有填充属性的值，请使用 CSS 更改颜色。

<style>
svg{ fill: red; }
</style>

或者第二个选项...

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable- 
background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="#ff0000" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
</svg>

这会使它变成红色。

在您的小提琴上尝试两者并使用最适合您的作品。

太棒了

【讨论】：

【解决方案3】：

CSS 填充和其他 SVG 特定规则不适用于使用 <img> 标签呈现的 SVG：

// CSS fills won't apply to this
<img src="image.svg">

您需要内联渲染 SVG 才能使 CSS 填充起作用。

// CSS fills will apply to this
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable- 
background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
</svg>

CSS：

#Layer_1 {
    fill: blue;
}

此外，您还可以使用 Javascript 自动将 SVG 转换为内联元素。但是，如果您正在处理一些静态 SVG 的界面（例如您的主题），最好将它们内联复制粘贴。

【讨论】：