如何設置背景/內聯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>'); 
}