自拍亚洲一区欧美另类,亚洲成人影院,亚洲午夜久久久久妓女影院,最近中文字幕高清中文字幕无,亚洲熟妇av一区二区三区漫画

學(xué)習(xí)筆記

精準(zhǔn)傳達(dá) ? 價(jià)值共享

洞悉互聯(lián)網(wǎng)前沿資訊,探尋網(wǎng)站營(yíng)銷規(guī)律

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

作者:狐靈科技 | 2020-01-30 14:21 |點(diǎn)擊:

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

經(jīng)歷

最初的圖片是這樣寫的:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
     preserveAspectRatio="xMinYMin meet"
     width="660" height="342"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <image xlink:href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="660" height="342"/>

    <rect x="2" y="284" width="656" height="58" fill="rgba(0,0,0,0.6)" stroke-width="1" ></rect>

    <text text-anchor="start"
          font-family="Microsoft Yahei, sans-serif" font-size="28"
          x="20" y="322" fill="#fff">這是百度</text>
    <text text-anchor="end"
          font-family="Microsoft Yahei, sans-serif" font-size="28"
          x="640" y="322" fill="#fff">?</text>
</svg>

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

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

但是通過(guò)<img>標(biāo)簽插入到HTML中后卻變成了這樣:

W.T.F!

查了半天MDN,也沒(méi)有什么收獲。

最后在 StackOverflow 上找到了一個(gè)解決方案:即使用<embed>標(biāo)簽。

修改成<embed src="./test.svg" style="display:block;width:330px;height:240px" />后卻顯示成了:

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

怎辦?又找了半天解決方案,發(fā)現(xiàn)這種情況應(yīng)該設(shè)置svg圖片的viewBox -- 在<svg>元素上增加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)除了<img><embed>外還有幾種嵌入SVG圖片的方法。在此總結(jié)下:

0. 使用svg標(biāo)簽

即直接把svg整個(gè)標(biāo)簽內(nèi)容(除了開(kāi)頭的xml和doctype聲明外的svg文件內(nèi)容)都丟到 HTML 中即可。
可惜不適合本例 -- 我們這次的svg是外部的,不好放入HTML中。

1. 使用img標(biāo)簽

<img src="./test.svg" style="display:block;width:330px;height:240px" />

這個(gè)是最容易想到的 -- 因?yàn)閟vg圖片也是圖片嘛。
需要注意的是,svg里面帶的<image>標(biāo)簽將無(wú)法正常顯示。<img>標(biāo)簽適合顯示純矢量+文本的SVG圖片。

2. 使用iframe標(biāo)簽

<iframe src="./test.svg" style="display:block;width:330px;height:240px;border:none;" ></iframe>

萬(wàn)能的iframe當(dāng)然什么都能顯示,但是無(wú)法控制內(nèi)容大小 -- viewBox也搞不定,估計(jì)只能用百分比來(lái)定位了,太麻煩了,不建議使用。

3. 使用embed標(biāo)簽

<embed src="./test.svg" style="display:block;width:330px;height:240px" />

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

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

<object type="image/svg+xml" data="./test.svg" style="display:block;width:330px;height:240px" >
    <param name="src" value="./test.svg" >
</object>

<object><embed>類似,也要注意配置viewBox.

5. 使用div的背景圖片

<div style="display:block;width:330px;height:240px;background: url(./test.svg) no-repeat;background-size: 100%;" ></div>

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

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

<picture >
    <source srcset="./test.svg"  type="image/svg+xml">
    <img src="./test.png" style="display:block;width:330px;height:240px">
</picture>

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

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

<picture><img>一樣,無(wú)法顯示SVG內(nèi)嵌的<image>.

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

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

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

如沒(méi)特殊注明,文章均為狐靈科技原創(chuàng),轉(zhuǎn)載請(qǐng)注明?? "HTML中嵌入SVG圖片的幾種方式
多一份免費(fèi)策劃方案,總有益處。

請(qǐng)直接添加技術(shù)總監(jiān)微信聯(lián)系咨詢

網(wǎng)站設(shè)計(jì) 品牌營(yíng)銷

多一份參考,總有益處

聯(lián)系狐靈科技,免費(fèi)獲得專屬《策劃方案》及報(bào)價(jià)

咨詢相關(guān)問(wèn)題或預(yù)約面談,可以通過(guò)以下方式與我們聯(lián)系

業(yè)務(wù)熱線:15082661954 / 大客戶專線:15523356218