数据结构
网络
关系数据库管理系统
操作系统
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 次浏览
广告