成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

NickZhou / 1071人閱讀

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

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

經(jīng)歷

最初的圖片是這樣寫(xiě)的：





    

    

    這是百度
    ?

p.s. 先拿百度的圖片來(lái)湊個(gè)數(shù)

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

但是通過(guò)后卻顯示成了：

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

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

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

完美！

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

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

這個(gè)是最容易想到的 -- 因?yàn)閟vg圖片也是圖片嘛。
需要注意的是，svg里面帶的標(biāo)簽將無(wú)法正常顯示。

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

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

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

5. 使用div的背景圖片

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

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

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

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

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

附完整帶測(cè)試代碼:

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/51189.html

相關(guān)文章

  • H5 分層屏幕適配

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

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

  • SVG可伸縮的矢量圖形

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

    孫淑建 評(píng)論0 收藏0

  • 翻譯 | 編寫(xiě)SVG的口袋指南（上）

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

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

  • 翻譯 | 編寫(xiě)SVG的口袋指南（上）

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<