前端 · 揭秘SVG - d 属性的内在工作原理

前端

2023-11-05 21:06:36

深入理解SVG - d属性的作用原理

SVG是一种基于XML的矢量图形格式，它可以创建可缩放、可交互的图形。SVG中，d属性用于定义路径、曲线、矩形、圆形等各种形状。通过使用d属性，可以创建各种复杂的图形，如图标、图表、动画等。

d属性的语法

d属性的值是一个字符串，它由一组命令和参数组成。命令用于指定要创建的形状类型，参数用于指定形状的具体尺寸和位置。命令和参数之间使用空格分隔。

常见的命令

M：移动到
L：连线到
H：水平线到
V：垂直线到
C：曲线到
S：平滑曲线到
Q：二次贝塞尔曲线到
T：平滑二次贝塞尔曲线到
A：椭圆弧到
Z：闭合路径

常用的参数

x：x坐标
y：y坐标
rx：椭圆的x半径
ry：椭圆的y半径
cx：椭圆的中心x坐标
cy：椭圆的中心y坐标
θ：椭圆的旋转角度

使用d属性创建图形

要使用d属性创建图形，需要先创建一个SVG元素，然后在SVG元素中添加一个path元素。path元素的d属性用于指定要创建的形状。

例如，要创建一个矩形，可以使用以下代码：

<svg width="100" height="100">
  <path d="M 10 10 L 90 10 L 90 90 L 10 90 Z" />
</svg>

这段代码将创建一个100像素宽、100像素高的矩形。

使用d属性创建复杂图形

d属性还可以用于创建更复杂的图形，如曲线、椭圆、弧线等。例如，要创建一个圆形，可以使用以下代码：

<svg width="100" height="100">
  <path d="M 50 50 A 50 50 0 0 1 100 50 A 50 50 0 0 1 50 100 A 50 50 0 0 1 0 50 A 50 50 0 0 1 50 0 Z" />
</svg>

这段代码将创建一个半径为50像素的圆形。

使用d属性进行动画

d属性还可以用于创建动画。要创建动画，需要使用SVG的元素。animate元素用于指定要动画的属性、动画的持续时间、动画的重复次数等。

例如，要创建一个从左到右移动的矩形，可以使用以下代码：

<svg width="100" height="100">
  <path id="rect" d="M 10 10 L 90 10 L 90 90 L 10 90 Z" />
  <animateMotion path="M 10 10 L 90 10" dur="2s" repeatCount="indefinite" />
</svg>

这段代码将创建一个100像素宽、100像素高的矩形，然后将矩形从左到右移动2秒，并无限重复。

使用d属性进行变换

d属性还可以用于对图形进行变换，如缩放、旋转、平移等。要对图形进行变换，需要使用SVG的元素。transform元素用于指定要变换的属性、变换的量等。

例如，要将矩形放大2倍，可以使用以下代码：

<svg width="100" height="100">
  <path id="rect" d="M 10 10 L 90 10 L 90 90 L 10 90 Z" />
  <animateTransform attributeName="transform" type="scale" values="1 1; 2 2" dur="2s" repeatCount="indefinite" />
</svg>