如何设置背景/内联 SVG 的填充颜色？ [复制]

Posted 2023-03-06

【中文标题】如何设置背景/内联 SVG 的填充颜色？ [复制]

【英文标题】：How to set a fill colour of an background/inline SVG? [duplicate]

【发布时间】：2016-01-30 20:06:12

【问题描述】：

.icon 
  width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  ><circle cx="10" cy="10" r="10" /></svg>');

<div class='icon'></div>

如何设置内联/背景 SVG 的填充颜色（使用 CSS）？

【问题讨论】：

css-tricks.com/using-svg 你不能。它必须是

【参考方案1】：

.icon 
  width: 20px; height: 20px;
  background-color: red;
 -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  ><circle cx="10" cy="10" r="10" /></svg>');
   mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  ><circle cx="10" cy="10" r="10" /></svg>');

【讨论】：

查看***.com/a/33435726/368691 以获得类似的解决方案。