我有以下代码:
<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>标记内?
当前回答
你把这个CSS for SVG圈。
svg:hover circle{
fill: #F6831D;
stroke-dashoffset: 0;
stroke-dasharray: 700;
stroke-width: 2;
}
其他回答
可以更改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;
}
如果你使用路径，你可以设置笔画颜色: 我在这里使用悬停效果:
svg:hover path {
stroke: blue;
}
您可以使用这种语法，但需要对SVG文件进行一些更改。并从SVG本身中删除任何填充/描边。
icon.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g,
must add viewBox on symbol just copy yhe viewbox from the svg tag itself
must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
<!-- add all the icon's paths and shapes here -->
<path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0 C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136 c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857 c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262 C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939 c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06 C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>
icon.html
<svg><use xlink:href="file_path/location.svg#location"></use></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%);
}
如果你想通过悬停在元素上来改变颜色，试试这个:
path:hover{
fill:red;
}
