首頁  >  文章  >  web前端  >  如何在HTML5中使用SVG

如何在HTML5中使用SVG

青灯夜游
青灯夜游原創
2018-11-30 14:18:498985瀏覽

在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

使用

以上是如何在HTML5中使用SVG的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:SVG是什麼下一篇:SVG是什麼