在用作背景圖像時修改SVG填充顏色將SVG輸出直接放在頁面代碼中,我可以簡單地用CSS修改填充顏色,如下所示:polygon.mystar {
fill: blue;}circle.mycircle {
fill: green;}這很好用,但是當SVG作為背景圖像時,我正在尋找一種修改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 回答

月關寶盒
TA貢獻1772條經(jīng)驗 獲得超5個贊

神不在的星期二
TA貢獻1963條經(jīng)驗 獲得超6個贊
.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>');
添加回答
舉報
0/150
提交
取消