如何更改此 SVG 的颜色？答案

【问题标题】：How to change color of this SVG?如何更改此 SVG 的颜色？
【发布时间】：2022-01-13 10:15:26
【问题描述】：

我尝试了多种方法来更改此 SVG 的颜色，但找不到解决方案。

提前谢谢你，真的很感激！

<svg width="30" height="42" viewBox="0 0 30 42" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect width="30" height="42" fill="url(#pattern0)"/>
  <defs>
    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image0" transform="translate(-0.327273) scale(0.0212121 0.0151515)"/>
    </pattern>
    <image id="image0" width="78" height="66" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABCCAYAAAD5aOBmAAAClklEQVR4Xu3bPasTQRQG4PfNTAIqaGHhHxDLi1pbeUELi/sX/GgtBFsrf4AfpdjY3MJCG8VaBMFCxM7Gj8biNlqICiEze+RChNzFsLMnWbMJb9qcd3bmyUl22cwSerkE6EopBME5m0BwgnMKOGPqOME5BZwxdZzgnALOWCcdNx6Pt0IItwFcAHAIwEeSDwaDwX2SE+dcexVbOtxkMtkm+WwKVl/sixDCDsnUKwXHZJYKZ2aHc86fAZyYNxeSN0MIdxxz7VWkGC7n/L5p5mZ2BMDJhrqfJD81jbWK90MIp0uPWwyXUrLSQde1LsZY7FFcKLiD7VAMl3O+0dRJVVUdJ3mroe4tyd2msVbxfgjhXulxi+FKB0wpPQdwaU59rqrq3Gg0elM6Xl/rlg5nZsdyzk8BnK8t+jeAqzHGx33FaDOvpcPtH9zMmFK6uH8BTPIoyQ+DwWCX5F6byfW5thO4Pi94WXMTnFNScIJzCjhj6jjBOQWcMXWc4JwCzpg6bt3hprfbr5M8a2bJzF7HGO+S/OpcW6exXnRcSukKgIcAQm21P8xsZzgcvuxUwTH4yuGmnfbuH2h/l/M9hHCK5DfH+jqLFMOllB51MQuSZ8xsq2HsVwC+dHH82TFjjJdLj9EGTrfOZ1QFN4PR1X8O+qp6Oq70u9+2buNPDm1B2tTrcqSNVq1WF8AL4K1TtPisuk6L+h9zFZxTWXCCcwo4Y+o4wTkFnDF1nOCcAs5YJx2nTTeOT2O6zesJgO1a/BeAa9rmNQdVGwtrMNrKehCk+DdOm6cFN/eXu5Nb53pAxNlxJSdYPZJUojSnRg/BLYCnxy4XwNv0aPHlyKZDtF2f4NqKTesFJzingDOmjhOcU8AZU8cJzingjP0Bj7/mQwtY53EAAAAASUVORK5CYII="/>
  </defs>
</svg>

【问题讨论】：

里面是图片，你需要链接不同的图片
您是要更改 png 的颜色还是仅更改 png 周围的区域？
@jdweng 整个 svg
您在矩形内有一个图像，它位于视图框内。那你要改变什么？
您的图像大于矩形和视图框，因此更改矩形和视图框不会显示，因为图像较大。

标签： javascript html xml svg

【解决方案1】：

好吧，经过数小时的谷歌搜索和研究，我手动解码了 base64 png 并将其转换为 PNG 文件。此后，我更改了 PNG 的颜色，将其保存并重新编码。

我会向所有遇到同样问题的人推荐这个解决方案！

【讨论】：

【解决方案2】：

你可以通过css过滤器改变颜色。

body {
  background-color: #000;
}

svg image {
  filter: invert(0.75) sepia(1) hue-rotate(180deg) saturate(1000%);
}

.fontAwesome {
  color: blue;
  display: inline-block;
  width: 1em;
  font-size: 32px;
}

<svg width="30" height="42" viewBox="0 0 30 42" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect width="30" height="42" fill="url(#pattern0)"/>
  <defs>
    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image0" transform="translate(-0.327273) scale(0.0212121 0.0151515)"/>
    </pattern>
    <image id="image0" width="78" height="66" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABCCAYAAAD5aOBmAAAClklEQVR4Xu3bPasTQRQG4PfNTAIqaGHhHxDLi1pbeUELi/sX/GgtBFsrf4AfpdjY3MJCG8VaBMFCxM7Gj8biNlqICiEze+RChNzFsLMnWbMJb9qcd3bmyUl22cwSerkE6EopBME5m0BwgnMKOGPqOME5BZwxdZzgnALOWCcdNx6Pt0IItwFcAHAIwEeSDwaDwX2SE+dcexVbOtxkMtkm+WwKVl/sixDCDsnUKwXHZJYKZ2aHc86fAZyYNxeSN0MIdxxz7VWkGC7n/L5p5mZ2BMDJhrqfJD81jbWK90MIp0uPWwyXUrLSQde1LsZY7FFcKLiD7VAMl3O+0dRJVVUdJ3mroe4tyd2msVbxfgjhXulxi+FKB0wpPQdwaU59rqrq3Gg0elM6Xl/rlg5nZsdyzk8BnK8t+jeAqzHGx33FaDOvpcPtH9zMmFK6uH8BTPIoyQ+DwWCX5F6byfW5thO4Pi94WXMTnFNScIJzCjhj6jjBOQWcMXWc4JwCzpg6bt3hprfbr5M8a2bJzF7HGO+S/OpcW6exXnRcSukKgIcAQm21P8xsZzgcvuxUwTH4yuGmnfbuH2h/l/M9hHCK5DfH+jqLFMOllB51MQuSZ8xsq2HsVwC+dHH82TFjjJdLj9EGTrfOZ1QFN4PR1X8O+qp6Oq70u9+2buNPDm1B2tTrcqSNVq1WF8AL4K1TtPisuk6L+h9zFZxTWXCCcwo4Y+o4wTkFnDF1nOCcAs5YJx2nTTeOT2O6zesJgO1a/BeAa9rmNQdVGwtrMNrKehCk+DdOm6cFN/eXu5Nb53pAxNlxJSdYPZJUojSnRg/BLYCnxy4XwNv0aPHlyKZDtF2f4NqKTesFJzingDOmjhOcU8AZU8cJzingjP0Bj7/mQwtY53EAAAAASUVORK5CYII="/>
  </defs>
</svg>

<p class="fontAwesome slider-h">
  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sliders-h" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-sliders-h fa-w-16 fa-3x"><path fill="currentColor" d="M496 384H160v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h80v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h336c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160h-80v-16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h336v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h80c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-160H288V48c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v16H16C7.2 64 0 71.2 0 80v32c0 8.8 7.2 16 16 16h208v16c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-16h208c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16z" class=""></path>
  
</svg>

</p>

更好地使用矢量图标库，如 fontAwesome、羽毛图标等。它们提供任何尺寸的卓越品质，并且可以通过填充或颜色属性进行着色。

另见：

How to change the color of an svg element?

【讨论】：