成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

svg矢量圖標(biāo)在html中的使用, （知識(shí)點(diǎn)：1.通過h5中的css實(shí)現(xiàn)點(diǎn)擊變色，2.一個(gè)svg文件

haoguo / 4050人閱讀

摘要：然而在使用過程中還是遇到了很多坑。這里我們要實(shí)現(xiàn)的功能是，一個(gè)文件包含多個(gè)圖形，這樣的好處是，網(wǎng)絡(luò)請(qǐng)求次數(shù)少，加載快速。再進(jìn)一步，還有兩種方法通過的獲取文件后附加到中。而且的不能為否則漸變色等引用會(huì)失效。

svg矢量文件體積小，不變形，比傳統(tǒng)的png先進(jìn)，比現(xiàn)在流行的icon-font靈活。然而在使用過程中還是遇到了很多坑。今天花了一天時(shí)間把經(jīng)驗(yàn)整理出來，以供后來者借鑒。如果您從本文收益，請(qǐng)留言mark一下。

這里我們要實(shí)現(xiàn)的功能是，一個(gè)svg文件包含多個(gè)圖形，這樣的好處是，網(wǎng)絡(luò)請(qǐng)求次數(shù)少，加載快速。否則一個(gè)網(wǎng)頁有10個(gè)圖標(biāo)就要請(qǐng)求10次。

?

一、制作svg

1.用記事本新建一個(gè)mysvg.svg , 里面內(nèi)容如下

2.用 ai 制作了一個(gè) svg文件, 把這個(gè)文件中的部分替換成symbol, 去掉所有屬性，只保留viewbox ,并增加一個(gè)id屬性（便于引用），然后拷貝到mysvg.svg中的svg標(biāo)簽中間 方便引用。

如下圖：








可如此增加多個(gè)svg文件到多帶帶的svg文件中國(guó)

二、html中引用這個(gè)svg

css:

html:

至此，已經(jīng)實(shí)現(xiàn)。

注意:

1這樣制作的svg無法通過img的src或 div的background-image引入

2.通過use 引入外部svg文件時(shí)，? 在.svg文件中指定的css(用

但這樣一來，svg代碼就很分散了，吃相很差。 有一種最優(yōu)雅的方式：直接將寫到html文件中，這樣svg中的css,filter,濾鏡等都可以生效。但是這樣html文件很臃腫，而且svg無法復(fù)用。

再進(jìn)一步，還有兩種方法

A.通過js 的ajax獲取svg文件后附加到html中。?

B:我開發(fā)用的是asp.net core, 在cshtml中插入下面一段


@Html.Raw(Model.Include("/myEditor/dist/expression.svg"));

其中Include是模型類中寫的一個(gè)方法，用于讀取文件內(nèi)容返回字符串。這種方式打開更快，因?yàn)榭蛻舳藳]有額外的http請(qǐng)求。注意這里之所以要用div包圍住，就是因?yàn)閟vg會(huì)占用空間。而且div的display不能為none,否則css,filter,漸變色等引用會(huì)失效。

看到很多網(wǎng)站在用 來在html中包含另一個(gè)html，但是現(xiàn)在在asp.net core中似乎已經(jīng)不起作用了，只能通過手動(dòng)寫個(gè)方法來實(shí)現(xiàn)同樣功能。

?

3.通過是不行的

5.使用symbol時(shí) filter（濾鏡）不能在svg內(nèi)部定義，只能在use的地方定義






6.

?

?參考文獻(xiàn)：https://blog.csdn.net/u010582082/article/details/70195629

?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1711.html

相關(guān)文章

  • iconfont實(shí)踐小結(jié)

    摘要：所以實(shí)現(xiàn)小圖標(biāo)時(shí)雪碧圖跟圖標(biāo)字體會(huì)在一個(gè)網(wǎng)站共存，自定義圖標(biāo)字體為什么比較耗時(shí)，且太復(fù)雜圖標(biāo)無法實(shí)現(xiàn)請(qǐng)往下看開發(fā)流程就了解了。參考資料細(xì)談淺談圖標(biāo)字體向下兼容優(yōu)雅降級(jí)技術(shù)繪制小圖標(biāo)技巧雪碧圖圖標(biāo)字體矢量小圖標(biāo)設(shè)計(jì)本文對(duì)應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關(guān)于雪碧圖的博文，...

    bitkylin 評(píng)論0 收藏0

  • CSS4:icon全解

    摘要：全解法如何在文件里扣出圖層里的圖標(biāo)右鍵選中這個(gè)圖層右擊這個(gè)圖層把這個(gè)圖層放到新文件點(diǎn)擊圖片的按鈕自動(dòng)切圖到最小再調(diào)整一下畫布大小將圖片設(shè)置為長(zhǎng)寬一樣導(dǎo)出即可在頁面里圖片會(huì)默認(rèn)保持比例所以只要設(shè)置寬高的其中一種就可以了摳圖的前端現(xiàn)在基本沒有了 CSS4:icon全解 1.img法 1.1如何在psd文件里扣出圖層里的圖標(biāo) 右鍵選中這個(gè)圖層showImg(https://segmentf...

    LinkedME2016 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段（9 -12）

    摘要：前端最基礎(chǔ)的就是。往期內(nèi)容前端培訓(xùn)初級(jí)階段前端培訓(xùn)初級(jí)階段后記慣例補(bǔ)上主講人文章參考資料引用培訓(xùn)目錄出處已備份到筆記字體生成原理及使用技巧查詢?cè)倭囊苿?dòng)端頁面的適配布局教程語法篇布局教程實(shí)例篇使用實(shí)現(xiàn)手淘頁面的終端適配 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS...

    LancerComet 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段（9 -12）

    摘要：前端最基礎(chǔ)的就是。往期內(nèi)容前端培訓(xùn)初級(jí)階段前端培訓(xùn)初級(jí)階段后記慣例補(bǔ)上主講人文章參考資料引用培訓(xùn)目錄出處已備份到筆記字體生成原理及使用技巧查詢?cè)倭囊苿?dòng)端頁面的適配布局教程語法篇布局教程實(shí)例篇使用實(shí)現(xiàn)手淘頁面的終端適配 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS...

    netScorpion 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段（9 -12）

    摘要：前端最基礎(chǔ)的就是。往期內(nèi)容前端培訓(xùn)初級(jí)階段前端培訓(xùn)初級(jí)階段后記慣例補(bǔ)上主講人文章參考資料引用培訓(xùn)目錄出處已備份到筆記字體生成原理及使用技巧查詢?cè)倭囊苿?dòng)端頁面的適配布局教程語法篇布局教程實(shí)例篇使用實(shí)現(xiàn)手淘頁面的終端適配 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS...

    MorePainMoreGain 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

haoguo

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<