第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在用作背景圖像時修改SVG填充顏色

在用作背景圖像時修改SVG填充顏色

繁華開滿天機 2019-06-28 17:15:35
在用作背景圖像時修改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個贊

這樣做的一種方法是從服務器端機制為SVG提供服務。只需創(chuàng)建一個資源服務器端,根據(jù)GET參數(shù)輸出SVG,然后在特定的url上提供它。

然后,您只需在CSS中使用該url即可。

因為作為背景IMG,它不是DOM的一部分,您不能操作它。另一種可能是定期使用它,以正常的方式將其嵌入到頁面中,但絕對定位它,使其完全寬度和頁面的高度,然后使用z索引CSS屬性將其放在頁面上的所有其他DOM元素后面。


查看完整回答
反對 回復 2019-06-28
?
神不在的星期二

TA貢獻1963條經(jīng)驗 獲得超6個贊

我需要一些類似的東西,我想堅持使用CSS。這里有更少和SCSS混合,以及普通的CSS,可以幫助您這一點。不幸的是,它的瀏覽器支持有點松懈。有關瀏覽器支持的詳細信息,請參閱下面。

減去混合蛋白:

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');}

減:

.element-color(#fff);

SCSS混音:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');}

SCSS使用情況:

@include element-color(#fff);

CSS:

// color: redbackground-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

這是更多的信息將完整的SVG代碼嵌入到CSS文件中。它還提到了瀏覽器兼容性,這是一個太小,這是一個可行的選擇。


查看完整回答
反對 回復 2019-06-28
  • 3 回答
  • 0 關注
  • 4092 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號