当SVG嵌入CSS时更改SVG填充

时间:2016-01-22 12:35:36

标签: css svg

我发现自己处于使用"内容"不是"背景图像"

.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;
    }
}

0 个答案:

没有答案