資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 HTML5 中的可伸縮向量圖形 (SVG)？
SVG 代表可伸縮向量圖形，它是一種使用 XML 描述 2D 圖形和圖形應用程式的語言，然後使用 SVG 檢視器渲染該 XML。
SVG 主要適用於向量型別圖表，如餅圖、X、Y 座標系中的二維圖形等。
要在 HTML5 中使用可伸縮向量圖形 (SVG)，請使用 <svg>...</svg> 標記直接嵌入 SVG，語法如下 −
語法
<svg xmlns="http://www.w3.org/2000/svg"> ... </svg>
要在 HTML5 SVG 中繪製形狀，請使用
- <circle> 元素繪製圓形。
- <rect> 元素繪製矩形。
- <line> 元素繪製線條。
- <ellipse> 元素繪製橢圓。
- <polygon> 元素繪製多邊形。
還可以使用 <img>、<iframe>、<object> 或 <embed> 標記將 SVG 新增到網頁中。我們來看看如何使用 <svg> 標記新增 HTML5 SVG。
你可以嘗試執行以下程式碼瞭解如何在 HTML5 中使用 SVG。我們這裡要繪製一個圓形
示例
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 10%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG Circle</title>
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="greencircle" cx="60" cy="60" r="50" fill="green" />
</svg>
</body>
</html>
更新日期： 2020-02-25
251 次瀏覽
廣告