路径

1. 什么是SVG路径
   M = moveto 起点
   L = lineto 其它点
   H = horizontal lineto 和上一个点Y相等
   V = vertical lineto 和上一个点X相等
   Z = closepath 关闭当前路径
2. 路径指令注意点
   大写字母是绝对定位，小写字母是相对定位
   绝对定位：写什么位置就是什么位置
   相对定位：相对上一次的位置，在上一次位置基础上做调整

<svg width="500" height="500">
    <!--<path d="M 100 100 L 300 100 L 300 300" stroke="red" fill="none" stroke-width="10"></path>-->
    <!--<path d="M 100 100 L 300 100 L 300 300 Z" stroke="red" fill="none" stroke-width="10"></path>-->
    <!--<path d="M 100 100 H 300 V 300 Z" stroke="red" fill="none" stroke-width="10"></path>-->
    <path d="M 100 100 l 300 100" stroke="red" stroke-width="10"></path>
</svg>

绘制圆弧

• A = elliptical Arc
• A(rx, ry, xr, laf, sf, x, y) 从当前位置绘制弧线到指定位置
• rx(radius-x): 弧线X半径
• ry(radius-y): 弧线Y半径
• xr(xAxis-rotation): 弧线所在椭圆旋转角度
• laf(large-arc-flag): 是否选择弧长较长的那一段
• sf(sweep-flag): 是否顺时针绘制
  x, y: 弧的终点位置

<svg width="500" height="500">
    <path d="M 100 100 A 100 50 0 0 0 200 150" stroke="red" fill="none"></path>
</svg>

起点(100, 100)，终点(200, 150)，rx=100，ry=50，不旋转，较短，逆时针

贝塞尔曲线

• Q = quadratic Bezier curve
• Q(x1, y1, x, y)从当前位置绘制二次贝塞尔曲线到指定位置
• x1, y1: 控制点位置
• x, y: 终点位置
• C = curveto
• C(x1, y1, x2, y2, x, y) 从当前位置绘制三次贝塞尔曲线到指定位置
• x1, y1: 控制点1位置
• x2, y2: 控制点2位置
• x, y: 终点位置

一次贝塞尔曲线 二次贝塞尔曲线 三次贝塞尔曲线

<svg width="500" height="500">
    <path d="M 100 100 Q 150 50 200 100" stroke="red" fill="none"></path>
    <path d="M 100 200 C 100 150 200 150 200 200" stroke="red" fill="none"></path>
</svg>

SVG绘制文本

和canvas一样，是以左下角为参考
和canvas一样，默认是文字的基线和指定的位置对齐

• x/y: 起始点，与对齐方式有关
• style="font-size: 40px" 设置字体大小
• fill 字体填充颜色
• stroke 字体描边颜色
• text-anchor 水平对齐方式 start/end/middle
• dominant-baseline 垂直对齐方式 after-edge/before-edge/middle
• dx 当前文字距离上一文字的间隙
• dy 当前文字在垂直方向上的偏移
• 多行文字

<text fill="red">//可以统一设置
    <tspan x="100" y="100">hello</tspan>
    <tspan x="100" y="150">world</tspan>
</text>

绘制路径文本

1. 定义一个路径
2. 告诉文本需要按照哪个路径来绘制
3. 注意点：如果是绘制路径文本，那么超出路径范围的内容不会被绘制出来

<svg width="500" height="500">
    <!--定义一个路径-->
    <defs>
        <path id="myPath" d="M 100 100 Q 150 50 200 100" stroke="red" fill="none"></path>
    </defs>
    <!--xlink:href给文本指定路径-->
    <text>
        <textPath xlink:href="#myPath">David Rao</textPath>
    </text>
</svg>

SVG绘制超链接

可以给任意内容添加超链接，只需要用超链接包裹即可

• xlink:href: 指定链接地址
• xlink:title: 指定链接显示
• target: 指定打开方式

<svg width="500" height="500">
    <a xlink:href="http://www.baidu.com" xlink:title="百度" target="_blank">

        <circle cx="50" cy="50" r="50" fill="red"></circle>
        <text x="100" y="100">David Rao</text>
    </a>
</svg>

SVG绘制图片

• 默认情况下我们的指定的图片多大就绘制多大
• 当设置的尺寸和图片实际尺寸不一样时，高度填满，宽度等比拉伸
• width/height 宽高
• x/y 位置

<svg width="500" height="500">
    <image xlink:href="alien.png" width="300" height="300" x="100" y="100"></image>
</svg>

SVG结构标签

1. g结构元素
   g是group的缩写，可以将多个元素放到一个g标记中，这样就组成了一个组，以便统一操作，比如旋转，缩放或者添加相关样式等
2. use
   g结构元素封装的图形还可以通过<use>元素进行复制使用<use xlink:href="">
3. defs
   g封装的元素默认是可见的，如果仅仅是需要定义一组模板，将来需要用的时候才显示，可以使用哦个defs
4. symbol

• symbol兼具<g>的分组功能和<defs>初始不可见的特性
• symbol能够创建自己的视窗，所以能够应用viewBox和preserveAspectRatio属性

<svg width="500" height="500">
    <defs>
        <g id="myGroup" fill="red">
            <circle cx="100" cy="100" r="100"></circle>
            <circle cx="100" cy="200" r="50"></circle>
            <circle cx="100" cy="300" r="30"></circle>
        </g>
    </defs>
    <use xlink:href="#myGroup" x="300"></use>
</svg>

SVG裁剪和蒙版

1. clipPath
   只有路径范围内的内容会被显示，路径范围外的内容不会被显示
2. mask
   mask和clipPath差不多
   2.1 裁剪路径是可见于不可见的突变
   2.2 蒙版则是可见与不可见的渐变

• 裁剪clip-path="url(#id)"
• 蒙版mask="url(#id)"

// 裁剪
<svg width="500" height="500">
    <clipPath id="myClip">
        <circle cx="200" cy="200" r="100" fill="red"></circle>
    </clipPath>
    <rect x="100" y="100" width="300" height="200" fill="blue" clip-path="url(#myClip)"></rect>
</svg>
// 蒙版
<svg width="500" height="500">
    <mask id="myMask">
        <circle cx="200" cy="200" r="100" fill="red"></circle>
    </mask>
    <rect x="100" y="100" width="300" height="200" fill="blue" mask="url(#myMask)"></rect>
</svg>

SVG渐变色

1. 线性渐变和径向渐变
   和canvas一样，在SVG中也可以生成渐变颜色
   <linearGradient></linearGradient> 线性渐变
   <radialGradient></radialGradient> 径向渐变

2. 渐变属性
   x1/y1: 渐变范围开始位置
   x2/y2: 渐变范围结束位置
   fill="url(#id)"

3. 注意点
   默认情况下x1/y1/x2/y2是当前元素的百分比
   可以通过gradientUnits修改

• gradientUnits = "objectBoundingBox" // 百分比
• gradientUnits = "userSpaceOnUse" // 像素

使用渐变颜色需要通过url(#id)格式来使用

<svg width="500" height="500">
    <defs>
        <linearGradient id="myColor" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
            <stop offset="0" stop-color="red"></stop>
            <stop offset="1" stop-color="blue"></stop>
        </linearGradient>
    </defs>
    <rect x="100" y="100" width="300" height="200" fill="url(#myColor)"></rect>
</svg>

SVG画笔

1. Pattern（画笔）
   在SVG中除了可hi使用纯色和渐变色作为填充色外，还可以使用自定义图形作为填充

2. Pattern属性
   width/height默认情况下也是百分比
   可以通过gradientUnits修改

• gradientUnits = "objectBoundingBox" // 百分比
• gradientUnits = "userSpaceOnUse" // 像素

使用画笔需要通过url(#id)格式来使用

<svg width="500" height="500">
    <defs>
        <pattern id="myPattern" width="0.2" height="0.2" gradientUnits = "objectBoundingBox">
            <circle cx="10" cy="10" r="10" fill="red"></circle>
        </pattern>
    </defs>
    <rect x="100" y="100" width="300" height="200" fill="url(#myPattern)"></rect>
</svg>

SVG形变

和canvas一样，改变的是坐标系

• transform="translate(100, 0)" 平移
• transform="scale(0.5, 1)" 缩放
• transform="rotate(15)" 旋转

<svg width="500" height="500">
    <rect x="100" y="100" width="200" height="100" fill="blue" transform="rotate(15) translate(50, 0) scale(1.5, 1.5)"></rect>
</svg>