如何更改此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>

​