尝试一下

欢迎关注我公众号：AI悦创，有更多更好玩的等你发现！

公众号：AI悦创【二维码】

SVG 文本 - <text>

<text> 元素用于定义文本。

实例 1

写一个文本：

I love SVG

下面是 SVG 代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>

SVG 路径 - <path>

<path> 元素用于定义一个路径。

下面的命令可用于路径数据：

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

SVG 多段线 - <polyline>

实例 1

<polyline> 元素是用于创建任何只有直线的形状：

下面是 SVG 代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

SVG 多边形 - <polygon>

实例 1

<polygon> 标签用来创建含有不少于三个边的图形。

多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。

polygon 来自希腊。 "Poly" 意味 "many" ， "gon" 意味 "angle".

下面是 SVG 代码：

<svg  height="210" width="500">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

SVG 直线 - <line>

<line> 元素是用来创建一个直线：

下面是 SVG 代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

SVG 椭圆 - <ellipse>

实例 1

<ellipse> 元素是用来创建一个椭圆：

椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的：

下面是 SVG 代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

SVG 圆形 - <circle>

<circle> 标签可用来创建一个圆：

下面是 SVG 代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

SVG Shapes

SVG有一些预定义的形状元素，可被开发者使用和操作：

• 矩形 <rect>
• 圆形 <circle>
• 椭圆 <ellipse>
• 线 <line>
• 折线 <polyline>
• 多边形 <polygon>
• 路径 <path>

SVG 文件可通过以下标签嵌入 HTML 文档：<embed> 、<object> 或者 <iframe>。

SVG 的代码可以直接嵌入到 HTML 页面中，或您可以直接链接到 SVG 文件。

使用 <embed> 标签

<embed> :

• 优势：所有主要浏览器都支持，并允许使用脚本
• 缺点：不推荐在 HTML4 和 XHTML 中使用（但在 HTML5 允许）

简单的 SVG 实例

SVG 文件推荐使用 .svg（全部小写）作为此类文件的扩展名。

一个简单的 SVG 图形例子：

<svg version="1.1"
  baseProfile="full"
  width="300" height="200"
  xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">Bornforthis SVG TEST</text>

</svg>

SVG 是使用 XML 来描述二维图形和绘图程序的语言。

学习之前应具备的基础知识：

继续学习之前，你应该对以下内容有基本的了解：

• HTML
• XML 基础

如果希望首先学习这些内容，请在本站的首页选择相应的教程。

什么是 SVG？

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体