更改svg图像颜色的简单方法？

Question

我正在 AI 中制作 SVG 图像并将它们插入到我的 HTML 中，如下所示：

<img class="animal_img" src="images/logos/bird.svg"/>

类如下所示：

.animal_img {
margin-left: 0px;
margin-top: 0px;
width: 192px;
}

该类仅“定位”图像。

目前我正在更改 AI 中的颜色，然后再次上传。但是通过 CSS 更改它是不是更简单的方法？有什么办法可以在类中插入更多代码并让它决定下垂图像的颜色/填充？

提前致谢， 马特

PS 对这个论坛相当陌生，所以我希望我的问题是正确的等等... :-)

Answer 1

当您添加内联 SVG 时，您可以轻松地做到这一点，只需在代码/文本编辑器中打开 SVG 并将代码复制粘贴到您的代码编辑器文件中。然后您可以使用fill: color; 将颜色寻址到 SVG。

您可以使用 SVG Editor 来优化 SVG。

使用width: 100%; 和height: auto; 将使SVG 填充它所在的容器。

以下示例。

.animal-svg {
  width: 192px;
}

.animal-svg svg {
  margin: 0;
  width: 100%;
  height: auto;
  fill: red;
}

<div class="animal-svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="450" height="450" viewBox="0 0 450 450" xml:space="preserve"><path d="M450 85.7c-17.7 7.6-35.4 12.4-53.1 14.3 20-12 33.5-28.9 40.5-50.8 -18.3 10.8-37.8 18.3-58.5 22.3 -18.3-19.4-40.7-29.1-67.4-29.1 -25.5 0-47.2 9-65.2 27 -18 18-27 39.7-27 65.2 0 6.9 0.8 13.9 2.3 21.1 -37.7-1.9-73-11.4-106.1-28.4C82.5 110.2 54.4 87.5 31.4 59.1c-8.4 14.3-12.6 29.8-12.6 46.5 0 15.8 3.7 30.5 11.1 44 7.4 13.5 17.4 24.5 30 32.8 -14.8-0.6-28.7-4.5-41.7-11.7v1.1c0 22.3 7 41.8 21 58.7 14 16.8 31.6 27.5 53 31.8 -8 2.1-16.1 3.1-24.3 3.1 -5.3 0-11.1-0.5-17.4-1.4 5.9 18.5 16.8 33.6 32.5 45.5 15.8 11.9 33.7 18 53.7 18.4 -33.5 26.3-71.7 39.4-114.5 39.4 -8.2 0-15.6-0.4-22.3-1.1 42.8 27.6 90 41.4 141.6 41.4 32.7 0 63.5-5.2 92.2-15.6 28.7-10.4 53.3-24.3 73.7-41.7 20.4-17.4 37.9-37.4 52.7-60.1 14.8-22.7 25.7-46.3 33-70.9 7.2-24.7 10.8-49.3 10.8-74.1 0-5.3-0.1-9.3-0.3-12C421.8 120.2 437.2 104.3 450 85.7z"/></svg>
  
  </div>

如果你真的不想使用内联 SVG，你可以使用另一个问题中的this answer：How to change color of SVG image using CSS (jQuery SVG image replacement)？

编辑 请参阅下面的示例，内联样式（如您的评论中所示）被 CSS (.animal-svg svg .st0) 否决。

.animal-svg {
  width: 192px;
}

.animal-svg svg {
  margin: 0;
  width: 100%;
  height: auto;
  fill: red;
}

.animal-svg svg .st0 {
  fill: red;
}

<div class="animal-svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="450" height="450" viewBox="0 0 450 450" xml:space="preserve">
  <style type="text/css"> .st0{fill:blue;} </style>
  <path class="st0" d="M450 85.7c-17.7 7.6-35.4 12.4-53.1 14.3 20-12 33.5-28.9 40.5-50.8 -18.3 10.8-37.8 18.3-58.5 22.3 -18.3-19.4-40.7-29.1-67.4-29.1 -25.5 0-47.2 9-65.2 27 -18 18-27 39.7-27 65.2 0 6.9 0.8 13.9 2.3 21.1 -37.7-1.9-73-11.4-106.1-28.4C82.5 110.2 54.4 87.5 31.4 59.1c-8.4 14.3-12.6 29.8-12.6 46.5 0 15.8 3.7 30.5 11.1 44 7.4 13.5 17.4 24.5 30 32.8 -14.8-0.6-28.7-4.5-41.7-11.7v1.1c0 22.3 7 41.8 21 58.7 14 16.8 31.6 27.5 53 31.8 -8 2.1-16.1 3.1-24.3 3.1 -5.3 0-11.1-0.5-17.4-1.4 5.9 18.5 16.8 33.6 32.5 45.5 15.8 11.9 33.7 18 53.7 18.4 -33.5 26.3-71.7 39.4-114.5 39.4 -8.2 0-15.6-0.4-22.3-1.1 42.8 27.6 90 41.4 141.6 41.4 32.7 0 63.5-5.2 92.2-15.6 28.7-10.4 53.3-24.3 73.7-41.7 20.4-17.4 37.9-37.4 52.7-60.1 14.8-22.7 25.7-46.3 33-70.9 7.2-24.7 10.8-49.3 10.8-74.1 0-5.3-0.1-9.3-0.3-12C421.8 120.2 437.2 104.3 450 85.7z"/></svg>
  
  </div>