首頁 > web前端 > H5教程 > 主體

如何在HTML5中使用SVG

青灯夜游
發布: 2018-12-04 10:49:14
原創
9041 人瀏覽過

在HTML5中我們可以透過使用標籤內聯SVG,使用HTML的如何在HTML5中使用SVG標籤、標籤、標籤、

如何在HTML5中使用SVG

SVG是一種向量圖形格式,可以隨著Web頁面的大小變化重新繪製以適應其尺寸,不會出現任何失真的情況;十分適合在響應式Web設計中使用。這篇文章就給大家具體介紹在HTML5中如何使用SVG,希望對你們有幫助。 【相關影片教學推薦:HTML5教學

使用HTML5 標籤內嵌SVG

SVG是HTML 5草案規範的一部分,即標籤是HTML 5語言的一部分,可以是內聯的。所有主要的瀏覽器品牌(IE9除外)現在都提供非常好的支援。

註:

1、要使用標籤內聯SVG,千萬不能忘記在標籤元素內宣告:xmlns=" http://www.w3.org/2000/svg"。 

2、這只能用於靜態SVG的導入。

下面是一個簡單的HTML5 SVG範例。

<svg  id = "circle"  height = "200"  xmlns = "http://www.w3.org/2000/svg" > 
      <circle  id = "greencircle"  cx = "30"  cy = "30"  r = " 30"  fill = "red"  /> 
</svg>
登入後複製

效果圖:

如何在HTML5中使用SVG

#使用如何在HTML5中使用SVG標籤匯入SVG映像

如何在HTML5中使用SVG

##註:使用如何在HTML5中使用SVG標籤只能用於靜態SVG影像的導入。

<img  src = "green-circle.svg"  height = "80"  alt="漂亮的绿色圆圈" />
登入後複製
效果圖:

#使用標籤匯入SVG映像
<object type="image/svg+xml" data="image.svg"></object>
登入後複製
從技術上講,標籤可用於許多元素,包括SVG文件,如果有不被識別為圖像的元素,則在圖像搜尋時就不可用。解決方法是使用如何在HTML5中使用SVG標記作為後備:

<object type="image/svg+xml" data="image.svg">
    <img  src="image.svg" / alt="如何在HTML5中使用SVG" >
</object>
登入後複製

#使用標籤導入SVG映像

<embed type="image/svg+xml" src="image.svg" />
登入後複製

不怎麼建議使用標籤導入SVG圖像,它不是HTML規範的一部分,但在主要用於實現Flash插件的所有瀏覽器上得到廣泛支援。 如何在HTML5中使用SVG

使用