在 Image 元素上设置 base 64 编码 SVG 的填充颜色？答案

【问题标题】：Setting the fill color of base 64 encoded SVG on Image element?在 Image 元素上设置 base 64 编码 SVG 的填充颜色？
【发布时间】：2020-01-31 04:53:53
【问题描述】：

我知道我们可以使用 CSS 为内联 SVG 更改填充颜色。我们可以对 base 64 编码的 SVG 做同样的事情吗？例如，这是使用 ng new 命令生成的 Angular 徽标。我尝试添加style="fill:blue;"，但没有骰子。

&lt;img style="fill: blue;"  alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" width="40"&gt;

【问题讨论】：

不，你不能，但你可以使用过滤器来近似它：stackoverflow.com/a/54802632/8620333

标签： html css angular svg

【解决方案1】：

您可以将图像base64解码为svg标记，然后修改它添加您的样式规则，再次base64编码并将图像的src设置为新的。

我尚未对其进行测试，但看不出它不起作用的原因。

【讨论】：

我接受了这个答案，因为我认为这是我们可以用 base 64 做的最好的事情。