SVG

矩形 <rect>

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

• 属性说明：

  • x：矩形左上角的 x 坐标。
  • y：矩形左上角的 y 坐标。
  • width：矩形的宽度。
  • height：矩形的高度。
  • rx：圆角的 x 方向半径（用于绘制圆角矩形）。
  • ry：圆角的 y 方向半径（用于绘制圆角矩形）。如果未指定 ry，则默认与 rx 相同。

• 示例：

  • 第一个矩形是标准矩形。
  • 第二个矩形是圆角矩形，圆角半径为 10。

圆形 <circle>

<circle cx="25" cy="75" r="20"/>

• 属性说明：

  • r：圆的半径。
  • cx：圆心的 x 坐标。
  • cy：圆心的 y 坐标。

• 示例：

  • 绘制一个圆心在 (25, 75)、半径为 20 的圆。

椭圆 <ellipse>

<ellipse cx="75" cy="75" rx="20" ry="10"/>

• 属性说明：

  • rx：椭圆的 x 方向半径。
  • ry：椭圆的 y 方向半径。
  • cx：椭圆中心的 x 坐标。
  • cy：椭圆中心的 y 坐标。

• 示例：

  • 绘制一个中心在 (75, 75)、x 方向半径为 20、y 方向半径为 10 的椭圆。

线条 <line>

<line x1="10" y1="110" x2="50" y2="150" stroke="black"/>

• 属性说明：

  • x1：起点的 x 坐标。
  • y1：起点的 y 坐标。
  • x2：终点的 x 坐标。
  • y2：终点的 y 坐标。
  • stroke：线条的颜色。

• 示例：

  • 绘制一条从 (10, 110) 到 (50, 150) 的黑色直线。

折线 <polyline>

<polyline points="60,110 65,120 70,115 75,130 80,125" stroke="black" fill="none"/>

• 属性说明：

  • points：定义折线的点坐标，格式为 x1,y1 x2,y2 x3,y3 ...。
  • stroke：线条的颜色。
  • fill：填充颜色，通常设置为 none。

• 示例：

  • 绘制一条由多个点组成的折线。

多边形 <polygon>

<polygon points="50,160 55,180 70,180 60,190 65,205 50,195 35,205 40,190 30,180 45,180" stroke="black" fill="none"/>

• 属性说明：

  • points：定义多边形的点坐标，格式为 x1,y1 x2,y2 x3,y3 ...。
  • stroke：线条的颜色。
  • fill：填充颜色，通常设置为 none。

• 示例：

  • 绘制一个由多个点组成的多边形。

路径 <path>

<path d="M10,80 C40,10 65,10 95,80 S150,150 180,80" stroke="black" fill="none"/>

• 属性说明：

  • d：定义路径的命令，包括移动 (M)、直线 (L)、曲线 (C、S)、闭合 (Z) 等。
  • stroke：线条的颜色。
  • fill：填充颜色，通常设置为 none。

• 示例：

  • 绘制一条贝塞尔曲线路径。

直线命令

直线命令用于在路径中绘制直线段，主要有以下两种命令：

M：移动到（Move To）

• 作用：将画笔移动到指定的坐标点，不绘制任何线条。
• 语法：M x y
  • x：目标点的 x 坐标。
  • y：目标点的 y 坐标。
• 示例：

  <path d="M10,10" stroke="black" fill="none"/>

  • 将画笔移动到坐标 (10, 10)。

L：画直线到（Line To）

• 作用：从当前点绘制一条直线到指定的坐标点。
• 语法：L x y
  • x：目标点的 x 坐标。
  • y：目标点的 y 坐标。
• 示例：

  <path d="M10,10 L50,50" stroke="black" fill="none"/>

  • 从 (10, 10) 绘制一条直线到 (50, 50)。

H 和 V：水平线和垂直线

• H：绘制一条水平线到指定的 x 坐标。
  • 语法：H x
  • 示例：H50 表示从当前点绘制一条水平线到 x=50。
• V：绘制一条垂直线到指定的 y 坐标。
  • 语法：V y
  • 示例：V30 表示从当前点绘制一条垂直线到 y=30。

Z：闭合路径

• 作用：从当前点绘制一条直线回到路径的起点，闭合路径。
• 语法：Z
• 示例：

  <path d="M10,10 L50,50 L50,10 Z" stroke="black" fill="none"/>

  • 绘制一个三角形并闭合路径。

曲线命令

曲线命令用于在路径中绘制平滑的曲线，主要包括以下两种类型：

贝塞尔曲线（Bezier Curve）

贝塞尔曲线通过控制点定义曲线的形状，分为二次贝塞尔曲线和三次贝塞尔曲线。

Q：二次贝塞尔曲线

• 作用：使用一个控制点绘制二次贝塞尔曲线。
• 语法：Q x1 y1, x y
  • x1 y1：控制点的坐标。
  • x y：目标点的坐标。
• 示例：

  <path d="M10,80 Q95,10 180,80" stroke="black" fill="none"/>

  • 从 (10, 80) 绘制一条二次贝塞尔曲线到 (180, 80)，控制点为 (95, 10)。

C：三次贝塞尔曲线

• 作用：使用两个控制点绘制三次贝塞尔曲线。
• 语法：C x1 y1, x2 y2, x y
  • x1 y1：第一个控制点的坐标。
  • x2 y2：第二个控制点的坐标。
  • x y：目标点的坐标。
• 示例：

  <path d="M10,80 C40,10 65,10 95,80" stroke="black" fill="none"/>

  • 从 (10, 80) 绘制一条三次贝塞尔曲线到 (95, 80)，控制点为 (40, 10) 和 (65, 10)。

平滑曲线（Smooth Curve）

平滑曲线是贝塞尔曲线的简化形式，自动计算控制点以保持曲线的平滑性。

T：平滑二次贝塞尔曲线

• 作用：基于前一个控制点自动计算新的控制点，绘制平滑的二次贝塞尔曲线。
• 语法：T x y
  • x y：目标点的坐标。
• 示例：

  <path d="M10,80 Q95,10 180,80 T300,80" stroke="black" fill="none"/>

  • 从 (10, 80) 绘制一条平滑的二次贝塞尔曲线到 (300, 80)。

S：平滑三次贝塞尔曲线

• 作用：基于前一个控制点自动计算新的控制点，绘制平滑的三次贝塞尔曲线。
• 语法：S x2 y2, x y
  • x2 y2：第二个控制点的坐标。
  • x y：目标点的坐标。
• 示例：

  <path d="M10,80 C40,10 65,10 95,80 S150,150 180,80" stroke="black" fill="none"/>

  • 从 (10, 80) 绘制一条平滑的三次贝塞尔曲线到 (180, 80)。

文本 <text>

<text x="10" y="220" font-family="Arial" font-size="20" fill="black">Hello, SVG!</text>

• 属性说明：

  • x：文本的 x 坐标。
  • y：文本的 y 坐标。
  • font-family：字体名称。
  • font-size：字体大小。
  • fill：文本颜色。

• 示例：

  • 在 (10, 220) 位置绘制文本 "Hello, SVG!"。

image 元素

SVG 的 <image> 元素允许在一个 SVG 对象内部呈现光栅图像。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>

动画

...

参阅

• SVG：可缩放矢量图形

拓展库：

• d3