玩转SVG！

环境准备

Editor：VS Code (插件：SVG by jock)

参考资料

MDN SVG 主题 https://developer.mozilla.org/zh-CN/docs/Web/SVG

上手

基本框架

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

  <rect width="100%" height="100%" fill="red" />

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

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

文件格式：.svg

基本形状

矩形

1	<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

参数	描述
x	矩形左上角的x位置
y	矩形左上角的y位置
width	矩形的宽度
height	矩形的高度
rx	圆角的x方位的半径
ry	圆角的y方位的半径

圆形

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

参数	描述
r	圆的半径
cx	圆心的x位置
cy	圆心的y位置

椭圆

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

参数	描述
rx	椭圆的x半径
ry	椭圆的y半径
cx	椭圆中心的x位置
cy	椭圆中心的y位置

线条

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

参数	描述
x1	起点的x位置
y1	起点的y位置
x2	终点的x位置
y2	终点的y位置

折线

1	<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

points 点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。

多边形

polygon 和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon 的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。

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

路径

1	<path d="M 20 230 Q 40 205, 50 230 T 90230"/>

d 一个点集数列以及其它关于如何绘制路径的信息。请阅读下文了解更多。

最常用的 path

<path> 元素是SVG基本形状中最强大的一个。你可以用它创建线条, 曲线, 弧线等等。

直线命令

这有一个比较好的例子，不过我们没画任何东西，只是将画笔移动到路径的起点，所以我们不会看到任何图案。但是，我把我们移动到的点标注出来了，所以在下面的例子里会看到 (10,10) 坐标上有一个点。注意，如果只画path，这里什么都不会显示。（这段不太好理解，说明一下：为了更好地展示路径，下面的所有例子里，在用path绘制路径的同时，也会用circle标注路径上的点。）

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10"/>
    <circle cx="10" cy="10" r="2" fill="red"/>
</svg>

H 和 V 分别表示绘制水平和垂直线，大写的 H 和 V 后面直接跟绝对距离，小写的 h 和 v 后面直接跟相对距离

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
    <circle cx="10" cy="10" r="2" fill="red"/>
    <circle cx="90" cy="90" r="2" fill="red"/>
    <circle cx="90" cy="10" r="2" fill="red"/>
    <circle cx="10" cy="90" r="2" fill="red"/>
</svg>

曲线命令

贝塞尔曲线

三次贝塞尔曲线（两个控制点，一个终点）

1	C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

x1 y1 是第一个控制点，x2 y2 是第二个控制点，x y 是终点

<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>

</svg>

二次贝塞尔曲线（一个控制点，一个终点）

1	Q x1 y1, x y (or q dx1 dy1, dx dy)

x1 y1 是控制点，x y 是终点

<svg width="200" height="400" xmlns="http://www.w3.org/2000/svg">
    <style>
        .gate:hover {fill:green !important;stroke:green !important; stroke-width:4;}
    </style>
    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="transparent" stroke="black" stroke-width="2"/>
    <circle class="gate" cx="10" cy="80" r="3" fill="red" />
    <path class="gate" d="M10 80 40 10" stroke="red" stroke-width="2" />
    <circle class="gate" cx="40" cy="10" r="3" fill="red" />
    <circle class="gate" cx="65" cy="10" r="3" fill="red" />
    <path class="gate" d="M65 10 95 80" stroke="red" stroke-width="2" />
    <circle class="gate" cx="95" cy="80" r="3" fill="red" />
    <path class="gate" d="M95 80 125 150" stroke="blue" stroke-width="2"><title>line</title></path>
    <circle class="gate" cx="125" cy="150" r="3" fill="blue" />
    <circle class="gate" cx="150" cy="150" r="3" fill="red" />
    <path class="gate" d="M150 150 180 80" stroke="red" stroke-width="2" />
    <circle class="gate" cx="180" cy="80" r="3" fill="red" />
    <path d="M10 300 Q 52.5 230 95 300 T 180 300" fill="transparent" stroke="black" stroke-width="2"/>
    <circle class="gate" cx="10" cy="300" r="3" fill="red" />
    <path class="gate" d="M10 300 52.5 230" stroke="red" stroke-width="2" />
    <circle class="gate" cx="52.5" cy="230" r="3" fill="red" />
    <path class="gate" d="M52.5 230 95 300" stroke="red" stroke-width="2" />
    <circle class="gate" cx="95" cy="300" r="3" fill="red" />
    <path class="gate" d="M95 300 137.5 370" stroke="blue" stroke-width="2"><title>line</title></path>
    <circle class="gate" cx="137.5" cy="370" r="3" fill="blue" />
    <path class="gate" d="M137.5 370 180 300" stroke="blue" stroke-width="2" />
    <circle class="gate" cx="180" cy="300" r="3" fill="red" />
</svg>

弧线

基本上，弧线可以视为圆形或椭圆形的一部分

1 2	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 表示从起点到终点沿顺时针画弧

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <style>
        .changecolor:hover{fill-opacity:1}
    </style>
    <path d="M10 315
                L 110 215
                A 30 50 0 0 1 162.55 162.45
                L 172.55 152.45
                A 30 50 -45 0 1 215.1 109.9
                L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5" class="changecolor"/>

    <path d="M 110 215
                A 30 50 0 0 0 162.55 162.45
                M 172.55 152.45
                A 30 50 -45 0 0 215.1 109.9" stroke="black" stroke-width="2" stroke-dasharray="5,5" fill="transparent"/>
    
    <path d="M80 300
            A 45 45 0 1 0 125 255
            L 125 300 80 300
            A 45 45 0 0 1 125 255
            " fill="transparent" stroke="black" stroke-width="2"/>
    
</svg>

ASICFANS