繁華開滿天機(jī)
2019-06-28 17:15:35
在用作背景圖像時(shí)修改SVG填充顏色將SVG輸出直接放在頁面代碼中,我可以簡單地用CSS修改填充顏色,如下所示:polygon.mystar {
fill: blue;}circle.mycircle {
fill: green;}這很好用,但是當(dāng)SVG作為背景圖像時(shí),我正在尋找一種修改SVG的“填充”屬性的方法。html {
background-image: url(../img/bg.svg);}我現(xiàn)在怎么換顏色?有可能嗎?作為參考,以下是我的外部SVG文件的內(nèi)容:<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"><polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679
118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/></svg>
3 回答

月關(guān)寶盒
TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個(gè)贊

神不在的星期二
TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊
.element-color(@color) { background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');}
.element-color(#fff);
@mixin element-color($color) { background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');}
@include element-color(#fff);
// color: redbackground-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');
添加回答
舉報(bào)
0/150
提交
取消