資料結構
網路
關係資料庫管理系統
作業系統
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 年 2 月 25 日
251 次瀏覽
廣告