路徑
- 什么是SVG路徑
M = moveto 起點
L = lineto 其它點
H = horizontal lineto 和上一個點Y相等
V = vertical lineto 和上一個點X相等
Z = closepath 關(guān)閉當(dāng)前路徑 - 路徑指令注意點
大寫字母是絕對定位，小寫字母是相對定位
絕對定位：寫什么位置就是什么位置
相對定位：相對上一次的位置，在上一次位置基礎(chǔ)上做調(diào)整
<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) 從當(dāng)前位置繪制弧線到指定位置
- rx(radius-x): 弧線X半徑
- ry(radius-y): 弧線Y半徑
- xr(xAxis-rotation): 弧線所在橢圓旋轉(zhuǎn)角度
- 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贾陷，不旋轉(zhuǎn)诵棵，較短，逆時針
貝塞爾曲線
- Q = quadratic Bezier curve
- Q(x1, y1, x, y)從當(dāng)前位置繪制二次貝塞爾曲線到指定位置
- x1, y1: 控制點位置
- x, y: 終點位置
- C = curveto
- C(x1, y1, x2, y2, x, y) 從當(dāng)前位置繪制三次貝塞爾曲線到指定位置
- 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一樣，默認(rèn)是文字的基線和指定的位置對齊
- x/y: 起始點嚣伐，與對齊方式有關(guān)
- style="font-size: 40px" 設(shè)置字體大小
- fill 字體填充顏色
- stroke 字體描邊顏色
- text-anchor 水平對齊方式 start/end/middle
- dominant-baseline 垂直對齊方式 after-edge/before-edge/middle
- dx 當(dāng)前文字距離上一文字的間隙
- dy 當(dāng)前文字在垂直方向上的偏移
- 多行文字
<text fill="red">//可以統(tǒng)一設(shè)置
<tspan x="100" y="100">hello</tspan>
<tspan x="100" y="150">world</tspan>
</text>
繪制路徑文本
- 定義一個路徑
- 告訴文本需要按照哪個路徑來繪制
- 注意點：如果是繪制路徑文本糖赔，那么超出路徑范圍的內(nèi)容不會被繪制出來
<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繪制超鏈接
可以給任意內(nèi)容添加超鏈接，只需要用超鏈接包裹即可
- xlink:href: 指定鏈接地址
- xlink:title: 指定鏈接顯示
- target: 指定打開方式
<svg width="500" height="500">
<a xlink: 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繪制圖片
- 默認(rèn)情況下我們的指定的圖片多大就繪制多大
- 當(dāng)設(shè)置的尺寸和圖片實際尺寸不一樣時轩端，高度填滿放典，寬度等比拉伸
- 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結(jié)構(gòu)標(biāo)簽
- g結(jié)構(gòu)元素
g是group的縮寫，可以將多個元素放到一個g標(biāo)記中基茵，這樣就組成了一個組奋构，以便統(tǒng)一操作，比如旋轉(zhuǎn)拱层，縮放或者添加相關(guān)樣式等 - use
g結(jié)構(gòu)元素封裝的圖形還可以通過<use>元素進行復(fù)制使用<use xlink:href=""> - defs
g封裝的元素默認(rèn)是可見的弥臼，如果僅僅是需要定義一組模板，將來需要用的時候才顯示根灯，可以使用哦個defs - symbol
- symbol兼具<g>的分組功能和<defs>初始不可見的特性
- symbol能夠創(chuàng)建自己的視窗径缅，所以能夠應(yīng)用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
只有路徑范圍內(nèi)的內(nèi)容會被顯示，路徑范圍外的內(nèi)容不會被顯示 - 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: 漸變范圍結(jié)束位置
fill="url(#id)"注意點
默認(rèn)情況下x1/y1/x2/y2是當(dāng)前元素的百分比
可以通過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默認(rèn)情況下也是百分比
可以通過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一樣，改變的是坐標(biāo)系
- transform="translate(100, 0)" 平移
- transform="scale(0.5, 1)" 縮放
- transform="rotate(15)" 旋轉(zhuǎn)
<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>
