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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在用作背景圖像時(shí)修改SVG填充顏色

在用作背景圖像時(shí)修改SVG填充顏色

在用作背景圖像時(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è)贊

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

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

因?yàn)樽鳛楸尘癐MG,它不是DOM的一部分,您不能操作它。另一種可能是定期使用它,以正常的方式將其嵌入到頁面中,但絕對(duì)定位它,使其完全寬度和頁面的高度,然后使用z索引CSS屬性將其放在頁面上的所有其他DOM元素后面。


查看完整回答
反對(duì) 回復(fù) 2019-06-28
?
神不在的星期二

TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊

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

減去混合蛋白:

.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文件中。它還提到了瀏覽器兼容性,這是一個(gè)太小,這是一個(gè)可行的選擇。


查看完整回答
反對(duì) 回復(fù) 2019-06-28
  • 3 回答
  • 0 關(guān)注
  • 4146 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)