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

Question

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

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

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

Answer 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" width="20" height="20"><circle cx="10" cy="10" r="10" /></svg>');
   mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="10" /></svg>');
}