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

【问题标题】：Can I change the fill color of an svg path with CSS?我可以使用 CSS 更改 svg 路径的填充颜色吗？
【发布时间】：2012-03-20 17:17:18
【问题描述】：

我有以下代码：

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

是否可以使用 CSS 或其他方式更改 SVG 路径的填充颜色，而无需在路径标签内实际更改它？

【问题讨论】：

Related Answer
现在，您可以通过<symbol> 和<use> 包含和设置外部文件的样式。见this answer。

标签： css svg

【解决方案1】：

这是一个适合我的简单解决方案：

将 svg 放入带有“id”的 div 标签中

然后

#id-div svg g {
     fill: #3366FF; 
}

【讨论】：

【解决方案2】：

您应该能够修改尺寸、颜色或其他属性：

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

【讨论】：

【解决方案3】：

2021 年 4 月编辑

如果您进入 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，而不是原生 SVG
Jasper 先生您有自己的答案吗？
这不是答案。这是问题的曲解。
问题是你需要去掉 SVG 中的这个硬编码值才能通过 CSS 进行控制。

【解决方案4】：

放入你所有的svg：

fill="var(--svgcolor)"

在 Css 中：

:root {
  --svgcolor: tomato;
}

使用伪类：

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

说明

root = html 页面。
--svgcolor = 一个变量。
span.github = 选择一个带有 github 类的 span 元素，里面有一个 svg 图标并分配伪类悬停。

【讨论】：

欢迎来到 StackOverflow，Neto。这看起来是一个很好的答案。感谢您的帮助。
-- 是 CSS 变量的语法，并且是较新的，因此值得在此处添加兼容性说明，即使问题会随着时间的推移而消失：除了旧 IE 和 Opera Mini 之外的所有东西都支持 CSS 变量.鉴于 Opera Mini 在发展中国家的受欢迎程度，Opera Mini 是一个重要的问题 - 您不应该使用这种技术来告知用户一些重要的事情，因为超过 1 亿的 Opera Mini 用户将无法看到它。 caniuse.com/#feat=css-variables
如果svg被替换，功能就丢失了。

【解决方案5】：

可以更改 svg 的路径填充颜色。 CSS sn-p 见下文：

为所有路径应用颜色：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;
    }

【讨论】：

【解决方案6】：

您可以使用此语法，但需要对 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（至少我这样做，在我的想法中这样做并在预览窗口中观察结果时）。或者，可以使用currentColor

【解决方案7】：

你把这个 css 放在 svg circle 上。

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

【讨论】：

【解决方案8】：

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

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

我更喜欢需要对源 svg 进行最少编辑的那个，也不需要将它嵌入到 html 文档中。此选项使用<object> 标签。

使用<object>将svg文件添加到您的html中；我还声明了 html 属性 width 和 height。使用这些宽度和高度，svg 文档不会被缩放，我在关联的 svg css 文件中为 svg 标签使用 css transform: scale(...) 语句解决了这个问题。

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

【讨论】：

【解决方案9】：

如果你想通过将鼠标悬停在元素中来改变颜色，试试这个：

path:hover{
  fill:red;
}

【讨论】：

【解决方案10】：

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

path {
    fill: blue;
}

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

【讨论】：

这仍然适用于 Chrome 吗？我在尝试使用 CSS 更改 SVG 路径的颜色时遇到了困难。
是的，我刚刚用当前的 Chrome 版本对其进行了测试，它仍然可以工作。如果您仍然需要帮助，请发布一个问题，包括一个独立的示例（带有外部或嵌入式 CSS 的 SVG）以及您的预期结果和您实际看到的内容的描述（不仅仅是“我遇到困难”）。
谢谢 Nicholas，我相信我找到了原因。我的 SVG 通过标签嵌入到页面中，CSS 似乎无法修改其中的任何内容。这是正确的吗？
请记住，为了让 CSS 为 SVG 设置样式，您必须在标记中包含 SVG 代码，如果通过<svg> 标签。
@RicardoZea 需要注意一点：您可以使用 <use href="external.svg#objId" /> 包含来自外部 SVG 文件的对象，并且您的本地 CSS 在某种程度上仍然适用。