前端SVG樣式顏色等開發(fā)注意事項(xiàng)
SVG
Scalable Vector Graphics 可縮放的矢量圖形
起源
在 2003 年一月,SVG 1.1 被確立為 W3C 標(biāo)準(zhǔn),在過去很長一段時(shí)間,網(wǎng)頁注重文字和圖片的展示,
SVG就被遺忘了,隨著網(wǎng)頁對(duì)圖形的要求越來越高,SVG又出現(xiàn)在人們的視野中。
關(guān)注點(diǎn)
可以從SVG這個(gè)名字就能瞄到我們第一個(gè)關(guān)注點(diǎn)在哪里,沒錯(cuò),就是可縮放的矢量圖形,這個(gè)還是得從位圖和矢量圖說起,可以直白來說,位圖縮放容易模糊,而矢量圖一般不會(huì),因?yàn)槭噶繄D記錄了位置信息,每次按照大小重新計(jì)算圖形,而位圖只能對(duì)像素粗暴的縮放,就會(huì)導(dǎo)致我們常見的圖片模糊。
SVG不會(huì)模糊?
NONONO,由于是矢量圖,是人去編寫的,所以矢量圖質(zhì)量決定了其縮放效果,具體因素待確定
其余優(yōu)點(diǎn)
1.支持多色圖標(biāo)
2.可以使用CSS實(shí)現(xiàn)動(dòng)畫,不需要再使用gif
4.本身就是DOM規(guī)范的一部分,可以像普通DOM一樣修改顏色,交互性非常強(qiáng)
提一下權(quán)重
SVG有些屬性屬于DOM屬性比如說fill,也可以作為CSS屬性,生效的效果是一樣的
<path fill="#fff" /> or <style style="fill:#fff">
那么問題來了,涉及到樣式,就必須有個(gè)權(quán)重規(guī)則,SVG能夠作為CSS屬性,寫到DOM作為屬性上的時(shí)候,權(quán)重僅比繼承權(quán)重大,理解這點(diǎn)很重要
修改SVG顏色的前提
由于設(shè)計(jì)師都會(huì)在SVG的圖形設(shè)置fill,我們?cè)谕饷嬷苯痈模琭ill是只能被繼承進(jìn)去SVG,權(quán)重很低,現(xiàn)在有兩種改變這種情況的辦法:
1.刪除SVG標(biāo)簽的fill屬性,讓其自然繼承fill
2.設(shè)置SVG標(biāo)簽繼承外面的fill
svg path{fill: inherit;}
兩種方式區(qū)別在與是否侵入SVG源碼
設(shè)置顏色
固定顏色
固定的顏色可以寫死在SVG里面
動(dòng)態(tài)顏色
動(dòng)態(tài)雙色
去除對(duì)應(yīng)區(qū)域的fill,SVG內(nèi)部動(dòng)態(tài)色標(biāo)簽使用currentColor,在外面的class改變fill和color即可實(shí)現(xiàn)動(dòng)態(tài)雙色,比較簡單,看下面實(shí)例
<svg id="jzm-m10" viewBox="0 0 40 40"> <g> <path d="M20,23c-2.2,0-4.1-1.3-5-2c0,0.8,0,6,0,6h10c0,0,0-5.6,0-6C24.1,21.7,22.2,23,20,23z" fill="currentColor"></path> <g> <path d="M24.5,29h-9c-1.4,0-2.5-1.1-2.5-2.5V19h-0.5c-1.4,0-2.5-1.1-2.5-2.5v-3c0-1.4,1.1-2.5,2.5-2.5h3.6 c0.5,0,0.9,0.3,1,0.8c0.3,1.3,1.5,2.2,2.9,2.2s2.6-0.9,2.9-2.2c0.1-0.4,0.5-0.8,1-0.8h3.6c1.4,0,2.5,1.1,2.5,2.5v3 c0,1.4-1.1,2.5-2.5,2.5H27v7.5C27,27.9,25.9,29,24.5,29z M12.5,13c-0.3,0-0.5,0.2-0.5,0.5v3c0,0.3,0.2,0.5,0.5,0.5H14 c0.6,0,1,0.4,1,1v8.5c0,0.3,0.2,0.5,0.5,0.5h9c0.3,0,0.5-0.2,0.5-0.5V18c0-0.6,0.4-1,1-1h1.5c0.3,0,0.5-0.2,0.5-0.5v-3 c0-0.3-0.2-0.5-0.5-0.5h-2.9c-0.8,1.8-2.6,3-4.6,3s-3.8-1.2-4.6-3H12.5z"></path> </g> </g> </svg>
如上圖在第一個(gè)path fill值給為currentColor,然后第二個(gè)path去除fill
默認(rèn)樣式 .svg { fill: #77809F; color: #dae0f8; }
hover樣式 .svg:hover { fill: #fff; color: #5874d8 }
動(dòng)態(tài)多色
動(dòng)態(tài)多色的難點(diǎn)在于需要同時(shí)更改多個(gè)狀態(tài),不能寫死,嗯?不能寫死不就是需要一個(gè)變量,然后外面改變這個(gè)變量他就跟著變就可以了,CSS原生的變量,不過因?yàn)橹С諭E11比較弱,暫時(shí)就不會(huì)出場(chǎng)了,實(shí)現(xiàn)套路與雙色一樣,把變量currentColor換成CSS變量,然后通過外部CSS改變這個(gè)變量指即可實(shí)現(xiàn)動(dòng)態(tài)雙色
目前存在的問題
如果使用了SVGdefs定義的漸變色,不要讓symbol display none,否則漸變色沒有生效
SVG需要去除title屬性,否則會(huì)出現(xiàn)提示
更多關(guān)于前端SVG開發(fā)的小技巧請(qǐng)查看下面的相關(guān)鏈接
相關(guān)文章
利用命令進(jìn)行簡單的增量文件夾備份(win/linux)
這兩天突然看到一個(gè)需求點(diǎn),需要實(shí)現(xiàn)增量備份的功能,找了一些資料,記錄一下如下命令,該命令可以利用命令行進(jìn)行簡單的增量備份功能2013-03-03- 本文主要介紹幾種軟件測(cè)試方法,這里對(duì)軟件測(cè)試做了幾種分類和匯總,在做軟件測(cè)試的時(shí)候可以用適當(dāng)?shù)姆椒?,有需要的小伙伴可以參考?/div> 2016-08-08
Verilog語言數(shù)據(jù)類型基礎(chǔ)教程
這篇文章主要為大家介紹了Verilog語言數(shù)據(jù)類型基礎(chǔ)教程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04最新評(píng)論