如何更改此 svg 中复选标记的颜色？

Question

1) 有没有办法改变这个 svg 中复选标记的颜色？

2) 为什么 fill:rgb(71,131,48); 有效而 fill:#478530; 无效？

3) 如果我想在云中创建其他符号，是否有任何工具可以做到这一点？

.icon {
 background: url('data:image/svg+xml;utf8,<svg id="icon-cloud-check" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:rgb(71,131,48);" d="M27.883 16.078c0.076-0.347 0.117-0.708 0.117-1.078 0-2.761-2.239-5-5-5-0.445 0-0.875 0.058-1.285 0.167-0.775-2.417-3.040-4.167-5.715-4.167-2.73 0-5.033 1.823-5.76 4.318-0.711-0.207-1.462-0.318-2.24-0.318-4.418 0-8 3.582-8 8s3.582 8 8 8h19c2.761 0 5-2.239 5-5 0-2.46-1.777-4.505-4.117-4.922zM13 24l-5-5 2-2 3 3 7-7 2 2-9 9z"></path></svg>') no-repeat;
}

<svg class="icon"></svg>

Answer 1

想法是用另一个背景作为底层：

.icon {
  background: 
   url('data:image/svg+xml;utf8,<svg id="icon-cloud-check" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:rgb(71,131,48);" d="M27.883 16.078c0.076-0.347 0.117-0.708 0.117-1.078 0-2.761-2.239-5-5-5-0.445 0-0.875 0.058-1.285 0.167-0.775-2.417-3.040-4.167-5.715-4.167-2.73 0-5.033 1.823-5.76 4.318-0.711-0.207-1.462-0.318-2.24-0.318-4.418 0-8 3.582-8 8s3.582 8 8 8h19c2.761 0 5-2.239 5-5 0-2.46-1.777-4.505-4.117-4.922zM13 24l-5-5 2-2 3 3 7-7 2 2-9 9z"></path></svg>') no-repeat,
   linear-gradient(red,red)50% 60%/50% 40% no-repeat;
  display:inline-block;
  width:150px;
  height:150px;
}

<svg class="icon"></svg>
<svg class="icon" style="width:100px;height:100px;"></svg>

Answer 2

您需要 url 对 # 符号进行编码

使用fill: %23478530

.icon {
  background: url('data:image/svg+xml;utf8,<svg id="icon-cloud-check" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:%23478530;" d="M27.883 16.078c0.076-0.347 0.117-0.708 0.117-1.078 0-2.761-2.239-5-5-5-0.445 0-0.875 0.058-1.285 0.167-0.775-2.417-3.040-4.167-5.715-4.167-2.73 0-5.033 1.823-5.76 4.318-0.711-0.207-1.462-0.318-2.24-0.318-4.418 0-8 3.582-8 8s3.582 8 8 8h19c2.761 0 5-2.239 5-5 0-2.46-1.777-4.505-4.117-4.922zM13 24l-5-5 2-2 3 3 7-7 2 2-9 9z"></path></svg>') no-repeat;
}

<svg class="icon"></svg>

如何更改此 svg 中复选标记的颜色？

How can I change the color of the check mark in this svg?

html

css

svg

fill