我可以用CSS改变svg路径的填充颜色吗?

I have the following code:

我有以下代码:

  <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>&nbsp;
  </span>

Is it possible to change the fill color of the SVG path with CSS or some other means without actually changing it inside the path tag?

是否可以用CSS或其他方法改变SVG路径的填充颜色，而不需要在路径标签中改变它?

5 个解决方案

#1

142

Yes, you can apply CSS to SVG, but you need to match the element, just as when styling HTML. If you just want to apply it to all SVG paths, you could use, for example:

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

path {
    fill: blue;
}

External CSS appears to override the path's fill attribute, at least in WebKit and Gecko-based browsers I tested. Of course, if you write, say, <path style="fill: green"> then that will override external CSS as well.

外部CSS似乎覆盖了路径的填充属性，至少在WebKit和基于geckbase的浏览器中我测试过。当然，如果您写入，那么它也将覆盖外部CSS。

#2

if you want to change color by hovering in the element, try this:

如果你想通过在元素中停留来改变颜色，试试这个:

path:hover{
  fill:red;
}

#3

If you go into the source code of an SVG file you can change the color fill by modifying the fill property.

如果您进入SVG文件的源代码，您可以通过修改填充属性来更改颜色填充。

<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

Use your favorite text editor, open the SVG file and play around with it.

使用您最喜欢的文本编辑器，打开SVG文件并使用它。

#4

I came across an amazing resource on css-tricks: https://css-tricks.com/using-svg/

我在css技巧上发现了一个惊人的资源:https://css- password . com/usingsvg/。

There are a handful of solutions explained there.

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

I preferred the one that required minimal edits to the source svg, and also didn't require it to be embedded into the html document. This option utilizes the <object> tag.

我更喜欢对源svg进行最小编辑的操作，也不需要将其嵌入到html文档中。此选项使用

Add the svg file into your html using <object>; I also declared html attributes width and height. Using these width and heights the svg document does not get scaled, I worked around that using a css transform: scale(...) statement for the svg tag in my associated svg css file.

使用

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

Create a css file to attach to your svn document. My source svg path was scaled to 16px, I upscaled it to 64 with a factor of four. It only had one path so I did not need to select it more specifically, however the path had a fill attribute so I had to use !IMPORTANT to force the css to take precedent.

创建一个css文件来附加到svn文档。我的源svg路径被缩放到16px，我将它放大到64，其中有一个因子为4。它只有一条路径，所以我不需要更具体地选择它，但是path有一个填充属性，所以我必须使用它。

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

Edit your target svg file, before the opening <svg tag, to include a stylesheet; Note that the href is relative to the svg file url.

编辑您的目标svg文件，在打开标记之前，包括样式表;注意，href相对于svg文件url。

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

#5

you put this css for svg circle.

将这个css用于svg循环。

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

#1

142