路径
- 什么是SVG路径
M = moveto 起点
L = lineto 其它点
H = horizontal lineto 和上一个点Y相等
V = vertical lineto 和上一个点X相等
Z = closepath 关闭当前路径 - 路径指令注意点
大写字母是绝对定位，小写字母是相对定位
绝对定位：写什么位置就是什么位置
相对定位：相对上一次的位置，在上一次位置基础上做调整
<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>
绘制路径文本
- 定义一个路径
- 告诉文本需要按照哪个路径来绘制
- 注意点：如果是绘制路径文本，那么超出路径范围的内容不会被绘制出来
<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结构标签
- g结构元素
g是group的缩写，可以将多个元素放到一个g标记中，这样就组成了一个组，以便统一操作，比如旋转，缩放或者添加相关样式等 - use
g结构元素封装的图形还可以通过<use>元素进行复制使用<use xlink:href=""> - defs
g封装的元素默认是可见的，如果仅仅是需要定义一组模板，将来需要用的时候才显示，可以使用哦个defs - 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裁剪和蒙版
- clipPath
只有路径范围内的内容会被显示，路径范围外的内容不会被显示 - 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渐变色
线性渐变和径向渐变
和canvas一样，在SVG中也可以生成渐变颜色
<linearGradient></linearGradient> 线性渐变
<radialGradient></radialGradient> 径向渐变渐变属性
x1/y1: 渐变范围开始位置
x2/y2: 渐变范围结束位置
fill="url(#id)"注意点
默认情况下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画笔
Pattern（画笔）
在SVG中除了可hi使用纯色和渐变色作为填充色外，还可以使用自定义图形作为填充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>
