<svg>元素簡單介紹

admin發表於2018-08-10
SVG

<svg>元素是其他SVG元素的父元素，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<svg width="300" height="200">
  <rect x="20" y="20"
        width="200"
        height="100"
        stroke="#630"
        stroke-width="1px"
        fill="red"
        />
</svg>  
</body>
</html>

SVG元素建立一個視口（viewport），可以通過此視口觀察畫布，超出視口的畫布內容預設會被遮擋。

視口和畫布的區別可以參閱SVG viewport視口和畫布一章節。

通過<svg>的width和height屬性規定視口的尺寸，也可以通過css屬性規定；預設是300px * 150px。

特別說明：此視口和移動端viewprot概念有區別，移動端更復雜，具體參閱移動端開發viewport一章節。

相關文章