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

我有以下代码:

<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>标记内部?

512401 次浏览
小开

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

​path {
fill: blue;
}​

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

小开

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

path:hover{
fill:red;
}
小开

我发现了一个关于css-tricks的惊人资源:https://css-tricks.com/using-svg/

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

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

使用<object>将svg文件添加到html中;我还声明了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" ?>
小开

编辑4月- 2021

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

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

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

我想出了另一种从SVG外部改变颜色的方法，那就是导入SVG内容并删除声明填充的样式规则。然后在CSS样式表中控制填充。

    <svg width="100%" height="100%" viewBox="0 0 167 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="Pic_icon"><path id="Pic_icon1" serif:id="Pic_icon" d="M166.667,0l-166.667,0l0,133.333l166.667,0l-0,-133.333Zm-158.276,70.89l32.771,-33.148l48.814,49.375l31.519,-19.575l36.781,32.176l-0,-91.3l-149.885,0l-0,62.472Zm84.426,-36.017c11.25,0 20.384,9.164 20.384,20.451c0,11.287 -9.134,20.451 -20.384,20.451c-11.25,0 -20.384,-9.164 -20.384,-20.451c0,-11.287 9.134,-20.451 20.384,-20.451Z" <!-- remove this -> style="fill:#08e1ea;" -->/></g></svg>

然后在我的CSS文件中:

    svg{ fill: green; }

现在您从SVG中删除了更高层次的填充声明，外部的填充声明将获得控制权。

这对我来说没有任何问题。

小开

你把这个CSS for SVG圈。

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

您可以使用这种语法，但需要对SVG文件进行一些更改。并从SVG本身中删除任何填充/描边。

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g,
must add viewBox on symbol just copy yhe viewbox from the svg tag itself
must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
<!-- add all the icon's paths and shapes here -->
<path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0   C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136   c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857   c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262   C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939   c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06   C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>

icon.html

<svg><use xlink:href="file_path/location.svg#location"></use></svg>
小开

可以更改svg的路径填充颜色。请看下面的CSS代码片段:

  1. 为所有路径应用颜色:svg > path{ fill: red }

  2. 应用第一个d路径:svg > path:nth-of-type(1){ fill: green }

  3. 应用第二个d路径:svg > path:nth-of-type(2){ fill: green}

  4. 如果要应用不同的d路径，只需更改路径号:
    svg > path:nth-of-type(${path_number}){ fill: green}

  5. 要在Angular 2到8中支持CSS，请使用封装概念:

:host::ng-deep svg path:nth-of-type(1){
fill:red;
}
小开

输入所有的svg:

fill="var(--svgcolor)"

在Css中:

:root {
--svgcolor: tomato;
}

使用伪类:

span.github:hover {
--svgcolor:aquamarine;
}

解释

root = HTML页面。< br > ——svgcolor =变量。< br > 跨度。Github =选择一个span元素与类Github，其中一个SVG图标和分配伪类悬停。< br > < / p >

小开

你应该能够修改尺寸，颜色或其他属性:

:host::ng-deep svg {
...
}
小开

这是一个简单的解决方案，适用于我:

  • 将SVG放在一个div标签中，使用"id"

然后

#id-div svg g {
fill: #3366FF;
}
小开
如果你使用路径，你可以设置笔画颜色: 我在这里使用的悬停效果:

svg:hover path {
stroke: blue;
}
小开

更改任何SVGs颜色 使用标签添加SVG图像 

<img src="dotted-arrow.svg" class="filter-green"/>
要过滤到特定的颜色，使用以下Codepen(点击这里打开Codepen)将十六进制颜色代码转换为CSS过滤器: 例如，#00EE00的输出是

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

将CSS过滤器添加到这个类中。

.filter-green{
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}

提交答案