我发现自己处于使用"内容"不是"背景图像"
.icon-right-arrow:before {
content: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22114%22%20height%3D%2236%22%20viewBox%3D%220%200%20114%2036%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3Earrow%3C/title%3E%3Cpath%20d%3D%22M96.93.86c-.643-.643-1.684-.643-2.326%200-.642.64-.642%201.682%200%202.324l13.173%2013.172H2.254C1.346%2016.356.61%2017.092.61%2018c0%20.908.736%201.644%201.644%201.644h105.523L94.604%2032.817c-.642.642-.642%201.683%200%202.325.32.32.742.482%201.162.482.42%200%20.84-.16%201.162-.482l15.98-15.98c.307-.307.48-.725.48-1.16.002-.438-.17-.856-.48-1.164L96.928.858z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E);
}
这会显示一个黑色SVG(猜测fill = "currentColor"
不能正常工作)
但是我需要使用CSS为页面的不同区域更改此填充颜色,通常如果SVG嵌入到HTML普通css中,但我无法通过这种方式工作,我尝试过很少的事情,没有一个有效。
我尝试做的甚至可能吗?我已经尝试了下面的
.icon-right-arrow:before {
content: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22114%22%20height%3D%2236%22%20viewBox%3D%220%200%20114%2036%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3Earrow%3C/title%3E%3Cpath%20d%3D%22M96.93.86c-.643-.643-1.684-.643-2.326%200-.642.64-.642%201.682%200%202.324l13.173%2013.172H2.254C1.346%2016.356.61%2017.092.61%2018c0%20.908.736%201.644%201.644%201.644h105.523L94.604%2032.817c-.642.642-.642%201.683%200%202.325.32.32.742.482%201.162.482.42%200%20.84-.16%201.162-.482l15.98-15.98c.307-.307.48-.725.48-1.16.002-.438-.17-.856-.48-1.164L96.928.858z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E);
fill: green;
svg {
fill: purple;
}
path {
fill: red;
}
* {
fill: yellow;
}
}