我有以下代码:

<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; 
}