我有以下代码:
<span>
<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
<desc></desc>
<defs/>
<path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
</svg>
</span>
是否有可能用CSS或其他方法改变SVG路径的填充颜色，而不实际改变<path>标记内?
当前回答
改变任何SVGs的颜色 使用标记添加SVG图像。
<img src="dotted-arrow.svg" class="filter-green"/>
要过滤为特定的颜色，使用以下Codepen(单击此处打开Codepen)将十六进制颜色代码转换为CSS过滤器: 例如，#00EE00的输出为
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
将CSS过滤器添加到这个类中。
.filter-green{
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
其他回答
这是一个简单的解决方案，适用于我:
将SVG放在带有“id”的div标签中
then
#id-div svg g {
fill: #3366FF;
}
是的，您可以将CSS应用到SVG，但您需要匹配元素，就像样式化HTML时一样。如果你只是想把它应用到所有的SVG路径，你可以使用，例如:
path {
fill: blue;
}
外部CSS似乎覆盖了路径的fill属性，至少在我测试的基于WebKit和gecko的浏览器中是这样。当然，如果你写<path style="fill: green">，那么它也会覆盖外部CSS。
我在css-tricks上发现了一个很棒的资源:https://css-tricks.com/using-svg/
这里解释了一些解决方案。
比起源svg，我更喜欢只需要进行最少编辑的那个，而且也不需要将它嵌入到html文档中。这个选项使用<object>标记。
使用<object>;我还声明了html属性width和height。使用这些宽度和高度，svg文档不会缩放，我使用css transform: scale(…)语句来处理相关的svg css文件中的svg标签。
<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>
创建一个css文件以附加到svn文档。我的源svg路径被缩放到16px，我将其放大到64，系数为4。它只有一个路径，所以我不需要更具体地选择它，但是路径有一个填充属性，所以我必须使用!IMPORTANT来强制css采取先例。
#svg2 {
width: 64px; height: 64px;
transform: scale(4);
}
path {
fill: #333 !IMPORTANT;
}
编辑你的目标svg文件，在<svg标签之前，包括一个样式表;注意，href是相对于svg文件url的。
<?xml-stylesheet type="text/css" href="myfile.css" ?>
改变任何SVGs的颜色 使用标记添加SVG图像。
<img src="dotted-arrow.svg" class="filter-green"/>
要过滤为特定的颜色，使用以下Codepen(单击此处打开Codepen)将十六进制颜色代码转换为CSS过滤器: 例如，#00EE00的输出为
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
将CSS过滤器添加到这个类中。
.filter-green{
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
如果你想通过悬停在元素上来改变颜色，试试这个:
path:hover{
fill:red;
}
