我有以下代码:
<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>标记内?
当前回答
如果你使用路径，你可以设置笔画颜色: 我在这里使用悬停效果:
svg:hover path {
stroke: blue;
}
其他回答
是的，您可以将CSS应用到SVG，但您需要匹配元素，就像样式化HTML时一样。如果你只是想把它应用到所有的SVG路径，你可以使用，例如:
path {
fill: blue;
}
外部CSS似乎覆盖了路径的fill属性，至少在我测试的基于WebKit和gecko的浏览器中是这样。当然，如果你写<path style="fill: green">，那么它也会覆盖外部CSS。
如果你想通过悬停在元素上来改变颜色，试试这个:
path:hover{
fill:red;
}
输入所有的svg:
fill="var(--svgcolor)"
在Css中:
:root {
--svgcolor: tomato;
}
使用伪类:
span.github:hover {
--svgcolor:aquamarine;
}
解释
Root = HTML页面。 ——svgcolor =变量。 跨度。Github =选择一个span元素与类Github，其中一个SVG图标和分配伪类悬停。
你把这个CSS for SVG圈。
svg:hover circle{
fill: #F6831D;
stroke-dashoffset: 0;
stroke-dasharray: 700;
stroke-width: 2;
}
这是一个简单的解决方案，适用于我:
将SVG放在带有“id”的div标签中
then
#id-div svg g {
fill: #3366FF;
}
