我有以下代码:

<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-tricks上发现了一个很棒的资源:https://css-tricks.com/using-svg/

这里解释了一些解决方案。

比起源svg,我更喜欢只需要进行最少编辑的那个,而且也不需要将它嵌入到html文档中。这个选项使用<object>标记。


使用<object>;我还声明了html属性width和height。使用这些宽度和高度,svg文档不会缩放,我使用css transform: scale(…)语句来处理相关的svg css文件中的svg标签。

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>

创建一个css文件以附加到svn文档。我的源svg路径被缩放到16px,我将其放大到64,系数为4。它只有一个路径,所以我不需要更具体地选择它,但是路径有一个填充属性,所以我必须使用!IMPORTANT来强制css采取先例。

#svg2 {
    width: 64px; height: 64px;
    transform: scale(4);
}
path {
    fill: #333 !IMPORTANT;
}

编辑你的目标svg文件,在<svg标签之前,包括一个样式表;注意,href是相对于svg文件url的。

<?xml-stylesheet type="text/css" href="myfile.css" ?>

其他回答

我在css-tricks上发现了一个很棒的资源:https://css-tricks.com/using-svg/

这里解释了一些解决方案。

比起源svg,我更喜欢只需要进行最少编辑的那个,而且也不需要将它嵌入到html文档中。这个选项使用<object>标记。


使用<object>;我还声明了html属性width和height。使用这些宽度和高度,svg文档不会缩放,我使用css transform: scale(…)语句来处理相关的svg css文件中的svg标签。

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>

创建一个css文件以附加到svn文档。我的源svg路径被缩放到16px,我将其放大到64,系数为4。它只有一个路径,所以我不需要更具体地选择它,但是路径有一个填充属性,所以我必须使用!IMPORTANT来强制css采取先例。

#svg2 {
    width: 64px; height: 64px;
    transform: scale(4);
}
path {
    fill: #333 !IMPORTANT;
}

编辑你的目标svg文件,在<svg标签之前,包括一个样式表;注意,href是相对于svg文件url的。

<?xml-stylesheet type="text/css" href="myfile.css" ?>

如果你想通过悬停在元素上来改变颜色,试试这个:

path:hover{
  fill:red;
}

是的,您可以将CSS应用到SVG,但您需要匹配元素,就像样式化HTML时一样。如果你只是想把它应用到所有的SVG路径,你可以使用,例如:

​path {
  fill: blue;
}​

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

你把这个CSS for SVG圈。

svg:hover circle{
    fill: #F6831D;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 2;
}

如果你使用路径,你可以设置笔画颜色: 我在这里使用悬停效果:

svg:hover path {
  stroke: blue;
}