使用 css 处理 svg 颜色答案

【问题标题】：Manipulate svg colors with css使用 css 处理 svg 颜色
【发布时间】：2016-06-08 19:11:28
【问题描述】：

我制作了一个svg 图标，用于在 Illustrator 中进行搜索，并希望在我的网站中使用它。我已经把它放在html里可以看到图标了。

<div id="search-btn">
    <img src="svg/search.svg">
</div>

但由于我是用黑色制作的，所以我想更改放大镜和背景的颜色。如何使用 css 操作 svg 的颜色？我对 svg 非常陌生，您的帮助将非常有价值。谢谢。

搜索图标：

svg代码：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4
    c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2
    c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4
    c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z"/>
</svg>

【问题讨论】：

标签： html css svg

【解决方案1】：

正如这个答案的 cmets 所说

CSS 不适用跨文档，而 img 是一个单独的文档。图像必须自包含在单个文件中以保护隐私。 – 罗伯特·朗森

因此这意味着您将无法在您的img 标记中包含您的SVG 并在页面上使用CSS 对其进行自定义。所以你有两个选择：

内联SVG 代码，这意味着废弃img 标记。然后，您可以按如下方式定位SVG。

#search-btn svg {
  fill: blue;
  background: grey;
  width: 100px;
  }

<div id="search-btn">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4
    c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2
    c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4
    c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z" />
  </svg>
</div>

或者您可以将样式添加到SVG 文件本身，如下所示，但这类似于在 Illustrator 中简单地编辑文件以获得所需的颜色。

<div id="search-btn">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <defs>
      <style>
        #XMLID_10_ {
          fill: blue;
        }
      </style>
    </defs>
    <path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4
    c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2
    c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4
    c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z" />
  </svg>
</div>

【讨论】：

但他没有使用内联 SVG，而是通过图像使用外部文件。为什么不建议一个 img 解决方案，例如在 SVG 文件本身中放置一个矩形来创建背景？
@RobertLongson 你可以在 img 标签中使用填充来定位 SVG 吗？
如果你把它放在 SVG 文件中，你可以。 IE。编辑图像文件并在其中嵌入一个<style> 标记，并使用您想要的填充。您需要一个矩形来定位填充，因为您不能使用背景。或者你可以在图像文件本身中添加一个<rect fill="whatever"...>`。
@RobertLongson 啊是的，好吧-我的想法。问题是，我解释 OPs 问题的方式是他希望能够在不更改文件的情况下更改颜色。鉴于您对 SVG 的了解不能再多（是的，我检查了您的个人资料），我猜想使用外部文件是不可能的。
CSS 不适用跨文档，img 是单独的文档。图片必须单独包含在一个文件中以保护隐私。

【解决方案2】：

要设置<svg> 的background-color，您必须使用background 或background-color 属性。要设置图标的颜色，您必须使用 fill 属性。请参阅以下示例：

svg {
  background:yellow;
  fill:red;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4
    c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2
    c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4
    c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z"/>
</svg>

【讨论】：

background 和 background-color 仅在 SVG 嵌入到 html 页面时才有效。对于像 OP 这样的独立 SVG，您需要一个明确的 rect。

【解决方案3】：

您可以为 svg 元素使用类。例如，Adobe Illustrator 提供了创建 SVG 内部 CSS 的可能性。但您也可以在自己的样式表中编写样式定义。

要设置背景，请使用 fill 属性，就像提到的 sebastianbrosch。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
    <defs>
        <style>
            .orange {
                fill:#f66d00;
            }
        </style>
    </defs>
    <path class="orange" d="M98.2, ... ,34.5z"/>
</svg>

【讨论】：