我有以下代码:
<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>标记内?
当前回答
编辑4月- 2021
如果您进入SVG文件的源代码，您可以通过修改fill属性来更改颜色填充。
<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
使用您最喜欢的文本编辑器，打开SVG文件并摆弄它。
我想出了另一种从SVG外部改变颜色的方法，那就是导入SVG内容并删除声明填充的样式规则。然后在CSS样式表中控制填充。
<svg width="100%" height="100%" viewBox="0 0 167 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="Pic_icon"><path id="Pic_icon1" serif:id="Pic_icon" d="M166.667,0l-166.667,0l0,133.333l166.667,0l-0,-133.333Zm-158.276,70.89l32.771,-33.148l48.814,49.375l31.519,-19.575l36.781,32.176l-0,-91.3l-149.885,0l-0,62.472Zm84.426,-36.017c11.25,0 20.384,9.164 20.384,20.451c0,11.287 -9.134,20.451 -20.384,20.451c-11.25,0 -20.384,-9.164 -20.384,-20.451c0,-11.287 9.134,-20.451 20.384,-20.451Z" <!-- remove this -> style="fill:#08e1ea;" -->/></g></svg>
然后在我的CSS文件中:
svg{ fill: green; }
现在您从SVG中删除了更高层次的填充声明，外部的填充声明将获得控制权。
这对我来说没有任何问题。
其他回答
编辑4月- 2021
如果您进入SVG文件的源代码，您可以通过修改fill属性来更改颜色填充。
<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
使用您最喜欢的文本编辑器，打开SVG文件并摆弄它。
我想出了另一种从SVG外部改变颜色的方法，那就是导入SVG内容并删除声明填充的样式规则。然后在CSS样式表中控制填充。
<svg width="100%" height="100%" viewBox="0 0 167 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="Pic_icon"><path id="Pic_icon1" serif:id="Pic_icon" d="M166.667,0l-166.667,0l0,133.333l166.667,0l-0,-133.333Zm-158.276,70.89l32.771,-33.148l48.814,49.375l31.519,-19.575l36.781,32.176l-0,-91.3l-149.885,0l-0,62.472Zm84.426,-36.017c11.25,0 20.384,9.164 20.384,20.451c0,11.287 -9.134,20.451 -20.384,20.451c-11.25,0 -20.384,-9.164 -20.384,-20.451c0,-11.287 9.134,-20.451 20.384,-20.451Z" <!-- remove this -> style="fill:#08e1ea;" -->/></g></svg>
然后在我的CSS文件中:
svg{ fill: green; }
现在您从SVG中删除了更高层次的填充声明，外部的填充声明将获得控制权。
这对我来说没有任何问题。
输入所有的svg:
fill="var(--svgcolor)"
在Css中:
:root {
--svgcolor: tomato;
}
使用伪类:
span.github:hover {
--svgcolor:aquamarine;
}
解释
Root = HTML页面。 ——svgcolor =变量。 跨度。Github =选择一个span元素与类Github，其中一个SVG图标和分配伪类悬停。
改变任何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:hover path {
stroke: blue;
}
可以更改svg的路径填充颜色。请看下面的CSS代码片段:
为所有路径应用颜色:svg > path{fill: red} 要应用第一个d路径:svg > path:n -of-type(1){fill: green} 要应用第二个d路径:svg > path:n -of-type(2){fill: green} 要应用不同的d路径，只需更改路径号: 要在Angular 2到8中支持CSS，请使用封装概念:
:host::ng-deep svg path:nth-of-type(1){
fill:red;
}
