数据结构
网络
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 次浏览
广告