SVG 路径

最新推荐文章于 2024-01-17 15:37:13 发布

书和咖啡

最新推荐文章于 2024-01-17 15:37:13 发布

阅读量892

点赞数

分类专栏： SVG 文章标签： svg

本文链接：https://blog.csdn.net/ivenqin/article/details/112603606

版权

本文深入探讨了SVG中的path元素，用于定义复杂形状。通过介绍M（移动到）、L（直线到）和A（圆弧）等命令，展示了如何绘制矩形和弧线。文中提供示例代码并解释了各参数含义，帮助读者理解SVG路径的绘制原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本节我们学习 SVG 中路径，在 SVG 中我们可以使用 <path> 元素来定义路径。<path> 的功能很强大，既可以创建基本的图形，也可以创建更复杂的形状。<path> 路径是由一些命令来控制的，每个命令对应一个字母，字母区分大小写。

<path> 元素可以用于定义路径，元素中有一个 d 属性，这个 d 属性是一系列命令的集合。

<path> 元素中支持下列命令，如果是大写命令表示绝对定位，小写则表示相对定位：

命令	参数	描述
M	x y	移动画笔到给定坐标，即起始点
L	x y	绘制一条到给定坐标的线，可提供多组坐标绘制折线
H	x y	绘制一条到 x 坐标的横线
V	y	绘制一条到 y 坐标的竖线
C	x yx1 y1 x2 y2	绘制一条从当前点到（x,y）的三次贝塞尔曲线，（x1,y1）为曲线的开始控制点，（x2,y2）为曲线的终点控制点
S	x y x1 y1	绘制一条从当前点到（x,y）的三次贝塞尔曲线，（x1,y1）为新端点的控制点
Q	x y x1 y1	绘制一条从当前点到（x,y），控制点为（x1,y1）的二次贝塞尔曲线
T	x y	绘制一条从当前点到（x,y）的二次贝塞尔曲线
A	rx ry x-axis-rotation large-arc-flag sweep-flag x y	绘制当前点到（x,y）的椭圆弧，椭圆弧的 x，y轴半径分别为 rx,ry。椭圆相对于 x 轴旋转 `x-axis-rotation` 度。`large-arc-flag` 等于0表示弧线小于180度，等于1表示弧线大于180度。`sweep-flag` 等于0 表示弧线逆时针旋转，等于1表示弧线顺时针选装
Z		闭合路径

例如我们使用路径命令绘制一个矩形：

<!DOCTYPE html>
<html>
    <head>
        <meta