我可以使用 CSS 更改 svg 路径的填充颜色吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9529300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I change the fill color of an svg path with CSS?
提问by Samantha J T Star
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>
</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 路径的填充颜色，而无需在路径标签内实际更改它？
回答by Nicholas Riley
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 fillattribute, 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 似乎覆盖了路径的fill属性，至少在我测试的基于 WebKit 和 Gecko 的浏览器中是这样。当然，如果你写的话，<path style="fill: green">那么它也会覆盖外部 CSS。
回答by Mark Esluzar Diamat
if you want to change color by hovering in the element, try this:
如果您想通过在元素中悬停来更改颜色，请尝试以下操作：
path:hover{
fill:red;
}
回答by Samuel Ramzan
If you go into the source code of an SVG file you can change the color fill by modifying the fill property.
如果您进入 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>
Use your favorite text editor, open the SVG file and play around with it.
使用您最喜欢的文本编辑器，打开 SVG 文件并使用它。
回答by Dulendra Singh
you put this css for svg circle.
你把这个css用于svg圆。
svg:hover circle{
fill: #F6831D;
stroke-dashoffset: 0;
stroke-dasharray: 700;
stroke-width: 2;
}
回答by ThorSummoner
I came across an amazing resource on css-tricks: https://css-tricks.com/using-svg/
我在 css-tricks 上发现了一个惊人的资源：https: //css-tricks.com/using-svg/
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 文档中。此选项使用<object>标签。
Add the svg file into your html using <object>; I also declared html attributes widthand 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 svgtag in my associated svg css file.
使用 将 svg 文件添加到您的 html 中<object>；我还声明了 html 属性width和height. 使用这些宽度和高度，svg 文档不会被缩放，我在相关的 svg css 文件中使用标签的 csstransform: scale(...)语句解决了这个问题svg。
<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 !IMPORTANTto force the css to take precedent.
创建一个 css 文件以附加到您的 svn 文档。我的源 svg 路径被缩放到 16 像素，我将它放大到 64，四倍。它只有一个路径，所以我不需要更具体地选择它，但是该路径有一个填充属性，所以我不得不使用它!IMPORTANT来强制 css 优先。
#svg2 {
width: 64px; height: 64px;
transform: scale(4);
}
path {
fill: #333 !IMPORTANT;
}
Edit your target svg file, before the opening <svgtag, to include a stylesheet; Note that the href is relative to the svg file url.
在开始<svg标记之前编辑目标 svg 文件以包含样式表；请注意，href 是相对于 svg 文件 url 的。
<?xml-stylesheet type="text/css" href="myfile.css" ?>
回答by Ahmed Hakim
You can use this syntax but it will require some changes in the SVG file. And remove any fill/stroke from the SVG itself.
您可以使用此语法，但需要对 SVG 文件进行一些更改。并从 SVG 本身删除任何填充/描边。
icon.svg
图标.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
图标.html
<svg><use xlink:href="file_path/location.svg#location"></use></svg>
回答by Rohinibabu
It's possible to change the path fill color of the svg. See below for the CSS snippet:
可以更改 svg 的路径填充颜色。请参阅下面的 CSS 片段：
To apply the color for all the path:
svg > path{ fill: red }To apply for the first d path:
svg > path:nth-of-type(1){ fill: green }To apply for the second d path:
svg > path:nth-of-type(2){ fill: green}To apply for the different d path, change only the path number:
svg > path:nth-of-type(${path_number}){ fill: green}To support the CSS in Angular 2 to 8, use the encapsulation concept:
为所有路径应用颜色：
svg > path{ fill: red }申请第一个d路径：
svg > path:nth-of-type(1){ fill: green }申请第二条d路径：
svg > path:nth-of-type(2){ fill: green}申请不同的d路径，只更改路径号：
svg > path:nth-of-type(${path_number}){ fill: green}要支持 Angular 2 到 8 中的 CSS，请使用封装概念：
:host::ng-deep svg path:nth-of-type(1){
fill:red;
}
