SVG 绘图

矩形

属性 说明
x 矩形左上角的x位置
y 矩形左上角的y位置
width 矩形的宽度
height 矩形的高度
rx 圆角的x方位的半径
ry 圆角的y方位的半径
<svg width="200" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="200" height="100" rx="10" ry="10" fill="#4faa2a"/>
</svg>

效果:

圆形

属性 说明
x 圆心的x位置
y 圆心的y位置
r 圆的半径
<svg width="150" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="75" cy="75" r="70" fill="#4faa2a"/>
</svg>

效果:

椭圆

属性 说明
rx 椭圆的x半径
ry 椭圆的y半径
cx 椭圆中心的x位置
cy 椭圆中心的y位置
<svg width="150" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="75" cy="50" rx="70" ry="35"  fill="#4faa2a"/>
</svg>

效果:

线条

属性 说明
x1 起点的x位置
y1 起点的y位置
x2 终点的x位置
y2 终点的y位置
<svg width="150" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="10" x2="140" y2="120" stroke="#4faa2a" stroke-width="2"/>
</svg>

效果:

折线

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polyline points="20,40 40,55 60,55 80,110 120,130 140,150" fill="none" stroke="#4faa2a" stroke-width="3"/>
</svg>
属性 说明
points 点与点的坐标集合;每个点包含 x 和 y 坐标,用空格分隔,点与点之间用逗号分隔。

效果:

多边形

和折线很像,不同的是,多边形的路径在最后一个点处自动回到第一个点。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon points="10 10,20 100,90 100,90 10" fill="#4faa2a"/>
</svg>
属性 说明
points 点与点的坐标集合;每个点包含 x 和 y 坐标,用空格分隔,点与点之间用逗号分隔。

效果:

路径

你可以用path元素绘制矩形、圆形、椭圆、折线形、多边形,以及一些其他的形状,例如贝塞尔曲线、2次曲线等曲线。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 150 0 L 75 200 L 225 200" fill="#4faa2a"/>
</svg>
属性 说明
d path 元素的形状是通过属性 d 定义的,属性 d 的值是一个“命令+参数”的序列

绘图命令
– 每个命令都用一个字母来表示,比如字母“M”表示的是“移动到”命令,比如移动到(10,10)这个点的命令写成“M 10 10”;
– 大写字母表示绝对定位。小写字母表示相对定位。

命令 说明 命令 说明 命令 说明
M 移动到 L 直线 H 水平画线
V 垂直画线 C 曲线 S 平滑曲线
Q 二次贝塞尔曲线 T 平滑的二次贝塞尔曲线 A 椭圆弧
Z 关闭路径

效果:

直线命令

  • M 命令,表示从那个点(x,y)开始绘制路径,语法: M x y,相对位置:m dx dy
  • L 命令,表示画线到点(x,y),语法:L x y,相对位置 l dx dy
  • H 命令,水平画线到x轴那个点,只需要一个参数x,;语法:H x, 相对位置用 h dx
  • V 命令,垂直画线y轴那个点,只需要一个参数y,;语法:V x, 相对位置用 v dx

注意:绝对位置 x 和 y 是具体某个点的坐标单位,相对位置dx,dy是距离多少个坐标单位。

实例:
用绝对位置和相对位置画一个正方型,效果是一样的

<svg version="1.1" height="100" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 10 H 90 V 90 H 10" fill="#4faa2a"/>
    <path d="m 110 10 h 80 v 80 h -80" fill="#4faa2a"/>
</svg>

效果:

贝塞尔曲线命令
贝塞尔曲线的类型有很多,在 path 元素里,只存在二次贝塞尔曲线和三次贝塞尔曲线。

三次贝塞尔曲线

C 命令
三次贝塞尔曲线需要定义一个点和两个控制点,所以用 C 命令创建三次贝塞尔曲线,包括开始点 M 总共四个点
的坐标参数:
语法:

M x0 y0 C x1 y1, x2 y2, x y
m dx0 dy0 c dx1 dy1, dx2 dy2, dx dy

(x1,y1) 是起点的控制点,(x2,y2) 是终点的控制点,(x,y) 表示的是曲线的终点;
控制点是曲线起始点的斜率,曲线上各个点的斜率,是从起点斜率到终点斜率的渐变过程。

实例:

<svg version="1.1" height="30" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 C 20 20,40 20,60 10" stroke="#4faa2a" storke-width="4" fill="transparent"/>
    <path d="M70 10 C 70 20,120 20,120 10" stroke="#4faa2a" storke-width="4" fill="transparent"/>
    <path d="M130 10 C 120 20,180 20,170 10" stroke="#4faa2a" storke-width="4" fill="transparent"/>
</svg>

效果:

S 命令
S 命令可以用来创建与之前那些曲线一样的贝塞尔曲线;
如果 S 命令单独使用,那么它的两个控制点就会被假设为同一个点;
如果 S 命令跟在一个 C 或者 S 命令的后面,它第一个控制点是前一个控制点的对称点。

实例:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
          stroke-width="4"
          stroke="#4faa2a"
          fill="transparent"/>
    <path d="M10 80 S 110 150, 180 80"
          stroke-width="4"
          stroke="blue"
          fill="transparent"/>
</svg>

效果:

二次贝塞尔曲线

Q 命令
二次贝塞尔曲线 Q,只需要一个控制点用来确定起点和终点的曲线斜率。它需要两组参数,控制点和终点坐标。
语法:

Q x1 y1, x y
q dx1 dy1, dx dy

实例:

<svg version="1.1" height="100" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 100 Q 95 10 180 100" stroke-width="4" stroke="#4faa2a" fill="transparent"/>
</svg>

效果:

T 命令
和三次贝塞尔曲线有一个 S 命令一样,有一个差不多的 T 命令可以通过更简短的参数延长二次贝塞尔曲线。
语法:

T x y
t dx dy

实例:

<svg version="1.1" height="100" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 50 Q 50 10 90 50 T 180 50" stroke-width="4" stroke="#4faa2a" fill="transparent"/>
</svg>

效果:

圆弧命令
弧形可以视为圆形或椭圆形的一部分。根据半径和两点,可以画出四种弧形。
语法:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

rx 和 ry 分别是 x 轴半径和 y 轴半径;
x-axis-rotation x轴旋转角度,表示弧形的旋转情况;
large-arc-flag 表示角度大小,决定弧线是大于还是小于180度,0表示小角度弧,1表示大角度弧;
sweep-flag 表示弧线方向,0表示从起点到终点逆时针画弧,1表示从起点到终点顺时针画弧;
最后两个参数x和y是弧形的终点。

创建简单的一段圆弧:

<svg version="1.1" height="150" xmlns="http://www.w3.org/2000/svg">
    <path d="M 20 150
            A 30 50 0 0 1 140 80"
          stroke="#4faa2a" fill="none" stroke-width="5" />
</svg>

效果:

在上面的基础设置x轴旋转角度为-45度(逆时针),圆弧围绕短轴旋转

语法:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 40 150 A 30 50 -45 0 1 140 80" stroke="#4faa2a" fill="none" stroke-width="5"/>
</svg>

效果:

large-arc-flag 值为0表示使用较小的弧线,值为1表示使用较大的弧线,下图蓝色线使用了较小的弧线,绿色使用较大的弧线。
语法:

<svg version="1.1" height="160" xmlns="http://www.w3.org/2000/svg">
    <path d="M 70,20 A 20,20 0 0 0 70,150" fill="none" stroke="#4faa2a" stroke-width="4"/>
    <path d="M 70,20 A 20,20 0 0 1 70,150" fill="none" stroke="blue" stroke-width="4"/>
</svg>

效果:

sweep-flag 表示弧线方向,0表示从起点到终点逆时针画弧,1表示从起点到终点顺时针画弧
语法:

<svg version="1.1" height="160" xmlns="http://www.w3.org/2000/svg">
    <path d="M 70,20 A 20,20 0 0 0 70,150" fill="none" stroke="#4faa2a" stroke-width="4"/>
    <path d="M 70,20 A 20,20 0 0 1 70,150" fill="none" stroke="blue" stroke-width="4"/>
</svg>

效果:
绿色线代表逆时针画弧,蓝色线代表顺时针画弧

留下评论

电子邮件地址不会被公开。 必填项已用*标注