SVG路径使用CSS填充颜色
SVG路径使用CSS填充颜色
提问于 2013-07-24 16:50:27
我看过很多人发这个帖子，他们似乎都对自己的答案很满意。
然而，我不能让我的路径填充到实际工作中，
http://jsfiddle.net/OwenMelbz/LvgmV/
小提琴在上面，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>如果有人能对这件事有所了解，我将不胜感激。
谢谢
回答 1
Stack Overflow用户
发布于 2018-08-18 13:05:52
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(例如你的主题)，最好是直接复制-粘贴它们内联。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17829261
复制相关文章
相似问题