如何使用 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 次浏览

开启你的 职业

通过完成课程获得认证

开始
广告