我可以使用 CSS 更改 svg 路径的填充颜色吗？

Question

我有以下代码：

 <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> 标签内实际更改它？

原文由 Samantha J T Star 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，您可以将 CSS 应用于 SVG，但您需要匹配元素，就像在设置 HTML 样式时一样。如果您只想将它应用于所有 SVG 路径，您可以使用，例如：

 ​path {
  fill: blue;
}​

外部 CSS 似乎覆盖了路径的 fill 属性，至少在我测试的基于 WebKit 和 Gecko 的浏览器中是这样。当然，如果您编写 <path style="fill: green"> 那么这也将覆盖外部 CSS。

原文由 Nicholas Riley 发布，翻译遵循 CC BY-SA 4.0 许可协议