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

資訊專欄INFORMATION COLUMN

HTML中嵌入SVG圖片的N種方式

NickZhou / 975人閱讀

摘要：完美總結(jié)中嵌入圖片的種方式在解決這個問題的過程中，順便查了下，發(fā)現(xiàn)除了這個是最容易想到的因為圖片也是圖片嘛。不過和標(biāo)簽一樣，無法顯示內(nèi)嵌的使用標(biāo)簽標(biāo)簽是新增的一個專門顯示圖片的標(biāo)簽。

最近用到了個SVG圖片，里面還是帶標(biāo)簽的，想要把它嵌入到HTML中還是有些工作要做的。

經(jīng)歷

最初的圖片是這樣寫的：





    

    

    這是百度
    ?

p.s. 先拿百度的圖片來湊個數(shù)

顯示效果應(yīng)該是：

但是通過后卻顯示成了：

只顯示了圖片左上角那部分有木有！這張圖片是按2倍圖做的，應(yīng)該要縮小一半，雖然給的元素加了寬高，但是卻沒能把svg內(nèi)容給縮放！

怎辦？又找了半天解決方案，發(fā)現(xiàn)這種情況應(yīng)該設(shè)置svg圖片的viewBox -- 在元素上增加viewBox="0 0 660 342"即可解決這個問題：

viewBox屬性允許指定一個給定的一組圖形伸展以適應(yīng)特定的容器元素。
-- viewBox - MDN

完美！

總結(jié)HTML中嵌入SVG圖片的N種方式

在解決這個問題的過程中，順便查了下，發(fā)現(xiàn)除了

這個是最容易想到的 -- 因為svg圖片也是圖片嘛。
需要注意的是，svg里面帶的標(biāo)簽將無法正常顯示。

注意使用viewBox，標(biāo)簽的兼容性也很不錯的，是個不錯的選擇。

4. 使用object標(biāo)簽

與類似，也要注意配置viewBox.

5. 使用div的背景圖片

svg圖片是可以作為背景圖片的。不過和標(biāo)簽一樣，無法顯示SVG內(nèi)嵌的.

6. 使用picture標(biāo)簽

標(biāo)簽是HTML5新增的一個專門顯示圖片的標(biāo)簽。

注意設(shè)置標(biāo)簽的屬性srcset而非src. 此外必需要添加一個標(biāo)簽，不過可以在標(biāo)簽中指定另外一張圖片，以便在瀏覽器無法顯示指定的圖片的時候顯示標(biāo)簽中的圖片。

和一樣，無法顯示SVG內(nèi)嵌的.

附完整帶測試代碼:

效果展示：https://clarencep.github.io/f...

源代碼：https://github.com/clarencep/...

首發(fā)地址：https://www.clarencep.com/201...，轉(zhuǎn)載請注明出處

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

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

相關(guān)文章

  • H5 分層屏幕適配

    摘要：單屏適配有或，多屏常見是依寬。整層適配為確保各層元素同步縮放，不走樣，每層的適配區(qū)應(yīng)當(dāng)?shù)扔谠O(shè)計稿大小。直接的實現(xiàn)就是構(gòu)造和適配區(qū)一樣尺寸的容器，整層適配。值為時對應(yīng)適配。這下媽媽再也不用擔(dān)心我還原問題屏幕適配問題了。 轉(zhuǎn)載請注明出處：http://hai.li/2018/03/14/h5-screen-adaptation.html 設(shè)計大大，這次真的是 按設(shè)計稿來 了，因為現(xiàn)在，任何...

    Arno 評論0 收藏0

  • SVG可伸縮的矢量圖形

    摘要：可伸縮的矢量圖形是對畫該圖形時的一些路徑，做出精準(zhǔn)的，必要的與分辨率無關(guān)的一種描述。 SVG可伸縮的矢量圖形SVG是對畫該圖形時的一些路徑，做出精準(zhǔn)的，必要的與分辨率無關(guān)的一種描述。即對矢量圖的描述在此安利一個svg繪圖的網(wǎng)址，可以直接手動繪圖，然后生成相關(guān)的svg描述，即可實現(xiàn)圖片 屬于所見所得的方式 有兩種方式在Adobe系列軟件中Illustrator可以直接生成svg的相關(guān)代碼...

    孫淑建 評論0 收藏0

  • 翻譯 | 編寫SVG的口袋指南（上）

    摘要：元素元素歸屬于容器和結(jié)構(gòu)元素，在文檔內(nèi)允許嵌套使用獨立的片段。如果包含葡萄的組被移動到文檔的末尾，它將出現(xiàn)在西瓜的前面。例如，將葡萄的莖的路徑移動到組的末尾將導(dǎo)致莖在頂部。 作者：DDU（滬江前端開發(fā)工程師）本文是原文翻譯，轉(zhuǎn)載請注明作者及出處。 簡介 Scalable Vector Graphics (SVG)是在XML中描述二維圖形的語言。這些圖形由路徑，圖片和（或）文本組成，并能...

    Brenner 評論0 收藏0

  • 翻譯 | 編寫SVG的口袋指南（上）

    摘要：元素元素歸屬于容器和結(jié)構(gòu)元素，在文檔內(nèi)允許嵌套使用獨立的片段。如果包含葡萄的組被移動到文檔的末尾，它將出現(xiàn)在西瓜的前面。例如，將葡萄的莖的路徑移動到組的末尾將導(dǎo)致莖在頂部。 作者：DDU（滬江前端開發(fā)工程師）本文是原文翻譯，轉(zhuǎn)載請注明作者及出處。 簡介 Scalable Vector Graphics (SVG)是在XML中描述二維圖形的語言。這些圖形由路徑，圖片和（或）文本組成，并能...

    linkFly 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<