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

您需要对#符号

进行网址编码

使用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中复选标记的颜色？

2 个答案: