Question

我在Illustrator中为搜索设置了一个svg图标，并希望在我的网站中使用它。我把它放在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>

Answer 1

如对此答案的评论中所述

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

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

内联SVG代码，即删除img代码。然后，您可以定位SVG，如下所示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

要设置smarc_i2c_cam: i2c-gpio-1 { compatible = "i2c-gpio"; pinctrl-names = "default"; pinctrl-0 = <&pinctrl_smx6_i2c_gpio_1>; gpios = <&gpio4 10 0>, /* sda */ <&gpio1 6 0>; /* scl */ #address-cells = <1>; #size-cells = <0>; i2c-gpio,delay-us = <2>; }; polytouch: edt-ft5x06@38 { compatible = "edt,edt-ft5x06"; reg = <0x38>; pinctrl-names = "default"; //pinctrl-1 = <&edt_ft5x06_pins>; interrupt-parent = <&gpio3>; interrupts = <1 8>; };的{{1}}，您必须使用background-color或<svg>属性。要设置图标的颜色，您必须使用background属性。请参阅以下示例：

＆＃13;

background-color

＆＃13;

fill

＆＃13;

Answer 3

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

要设置背景，请使用sed属性，例如sebastianbrosch提到的。

fill

用css操纵svg颜色

3 个答案: