如何使存储在 svg 图片的填充字段中的颜色成为变量？

Posted 2023-03-28

【中文标题】如何使存储在 svg 图片的填充字段中的颜色成为变量？

【英文标题】：How to make the colour stocked in the fill field of a svg picture a variable?

【发布时间】：2018-08-10 19:55:30

【问题描述】：

我目前正在开发一个聊天应用程序，在该应用程序上，未经身份验证的人与随机水果和随机颜色相关联。 根据这些信息，他们有一个头像，这是他们水果的标志（一个 svg 文件），用他们的颜色着色。

但我想避免在我的应用程序中有很多文件，所以我只为每个水果有 1 个 svg 文件，黑色的一个 (fill="#000000")，我正在寻找一种解决方案来改变用赖特颜色填充字段的值。

例如，如果某人是蓝桃，则必须加载图像 peach.svg，但必须为“#2111EF”删除填充字段的“#000000”。

你知道我该怎么做吗？ :)

我正在使用 AngularJS 与 Laravel 合作。

非常感谢:)

【问题讨论】：

您可以使用inline SVG。然后就可以应用 CSS 或 javascript 等任何填充值。

【参考方案1】：

您可以用currentColor 填充它。 所以父颜色会反映在 svg 上。

const container = document.getElementById('container');
const redButton = document.getElementById('red-btn');

redButton.addEventListener('click', ()=>
  container.classList.replace('blue', 'red');
);

div 
  width: 5rem;


div svg 
  fill: currentColor;


.blue 
  color: blue;


.red 
  color: red;

<div class="blue" id="container">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/>
  </svg>
</div>
<button id="red-btn">Red</button>

https://css-tricks.com/cascading-svg-fill-color/