接著上篇文章繼續(xù)往后講解其他知識(shí)點(diǎn)，感謝讀者們?cè)敢饣ㄙM(fèi)您們寶貴時(shí)間閱讀！
使用濾鏡filter（也是設(shè)置陰影）
<filter>標(biāo)記里的id屬性定義了這個(gè)濾鏡的唯一標(biāo)志
<rect>標(biāo)記里的filter屬性定義了需要引用的濾鏡是“f1”
蒙版
使用蒙版需要在使用前在<defs>中定義<mask>并為其設(shè)置一個(gè)唯一id，然后在需要應(yīng)用蒙版的元素上添加一條屬性mask="url(#id)"
設(shè)置有了蒙版，還需要在蒙版中添加圖形元素并指定黑白顏色
案例
例子1
<svg width="1000" height="500">
<g>
<mask id="model">
<circle cx="100" cy="160" r="80" fill="yellow" x="80" y="80"/>
<circle cx="160" cy="160" r="80" fill="black" x="80" y="80"/>
</mask>
<circle cx="100" cy="160" r="80" fill="yellow" x="80" y="80" mask="url(#model)" />
</g>
</svg>
<style>
body,html{
background-color:skyblue;
}
</style>
效果圖
例子2
裁剪前
html
<svg width="1000" height="800">
<g>
<mask id="model">
<circle cx="160" cy="160" r="80" fill="black" x="80" y="80"/>
<rect x="160" y="180" rx="100" ry="100" width="100" height="100" stroke="red" fill="red"/>
</mask>
<circle cx="160" cy="160" r="80" fill="black" x="80" y="80" mask="url(#model)" />
</g>
</svg>
裁剪后
例子3
html
<svg width="1000" height="500">
<g>
<mask id="model">
<circle cx="100" cy="160" r="80" fill="yellow" x="80" y="80"/>
<circle cx="160" cy="160" r="80" fill="black" x="80" y="80"/>
</mask>
<circle cx="100" cy="160" r="80" fill="yellow" x="80" y="80" mask="url(#model)" />
</g>
<g>
<mask id="model">
<circle cx="160" cy="160" r="80" fill="black" x="80" y="80"/>
<rect x="160" y="180" rx="100" ry="100" width="100" height="100" stroke="red" fill="red"/>
</mask>
<circle cx="160" cy="160" r="80" fill="black" x="80" y="80" mask="url(#model)" />
</g>
</svg>
效果圖
裁剪clipPath
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<circle cx="70" cy="70" r="40"/>
<circle cx="30" cy="30" r="20"/>
</clipPath>
</defs>
<rect x="10" y="10" width="100" height="100" clip-path="url(#myClip)"/>
</svg>
裁剪路徑和蒙板區(qū)別就是：
裁剪路徑覆蓋的對(duì)象要么就是全透明(可見的，位于裁剪路徑內(nèi)部)罗侯，要么就是全不透明(不可見，位于裁剪路徑外部)溪猿；蒙板可以指定不同位置的透明度
裁剪主要為了設(shè)置不同形狀圖形钩杰，蒙版主要為了設(shè)置漸變顏色圖形
（路徑畫法）貝塞爾曲線
<path d="M20 20 C90 40 130 40 180 20" stroke="#000000" fill="none" style="stroke-width: 2px;"></path>
三次貝塞爾曲線的原理：
其中，Catmull-Rom曲線不是標(biāo)準(zhǔn)的svg命令
案例：
動(dòng)畫animate方面：
動(dòng)畫原理
動(dòng)畫標(biāo)簽
動(dòng)畫元素诊县，屬性定位讲弄，動(dòng)畫參數(shù)
定位：
動(dòng)畫標(biāo)簽被包含在目標(biāo)元素里：
基本animate標(biāo)簽屬性設(shè)置：
fill屬性設(shè)置：
fill=”freeze”，設(shè)置freeze時(shí)依痊，動(dòng)畫就停止在to的數(shù)值位置避除；其他屬性表示：remove回原位
repeatCount=“100”，表示次數(shù)為100胸嘁；其他屬性表示：循環(huán)indefinite瓶摆，一次:forwards
動(dòng)畫疊加
animate標(biāo)簽:
animateTransform標(biāo)簽：（不能疊加）
軌跡路徑：
案例
例子1：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-400 -400 800 800">
<rect x="-25" y="-25" width="50" height="50" fill="red">
<animateMotion
path="M0 0 L100 100 A200 200 0 1 0 0 -100"
dur="3s"
rotate="auto"
</animateMotion>
</rect>
<path id="pathRoad" d="M0 0 L100 100 A200 200 0 1 0 0 -100" stroke="gray" fill="none"></path>
</svg>
<style>
html,body,svg{
width:100%;
height:100%;
padding: 0;
margin: 0;
}
</style>
效果圖
例子2：
<rect x="10" y="10" width="100" height="100">
<animate attributeType="XML" attributeName="x" from="100" to="120"
dur="2s" repeatCount="forwards"/>
</rect>
效果圖
例子3：
沿著路徑運(yùn)動(dòng)
<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
stroke="lightgrey" stroke-width="2"
fill="none" id="theMotionPath"/>
<circle cx="10" cy="110" r="3" fill="lightgrey" />
<circle cx="110" cy="10" r="3" fill="lightgrey" />
<circle cx="" cy="" r="5" fill="red">
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
</circle>
效果圖
線性變換：
旋轉(zhuǎn)變換transform（會(huì)經(jīng)常在繪制圖形時(shí)，改變其狀態(tài)性宏，用到它）
文本text
屬性： dx群井、dy屬性，切線和法線方向的偏移毫胜；dx是設(shè)置字體之間的間隙蝌借，dy是設(shè)置字體間縱坐標(biāo)的位置；x指蚁、text-anchor、startOffset屬性自晰，確定排列起始位置
文本垂直居中問(wèn)題
textPath使用方法：
加在文本的超鏈接（a標(biāo)簽）
Xlink:href 指定連接地址
Xlink:title 指定連接提示
Target 指定打開目標(biāo)
文本旋轉(zhuǎn)
設(shè)置文本路徑（可以取消路徑顏色凝化，也可以設(shè)置路徑顏色）
案例
例子1
<text x="30" y="30" dx="20 20 20 20 20 20 20 20 20 20 20" dy="10" style="font-size: 20px;">hello world!</text>
<path d="M40,0 V200 M0,40 H200" stroke="red"/>
效果圖
例子2
<text id="sintext" x="100" y="100" dx="20,20,20,20,20,20,20,20,20,20,20" dy="20,20,20,20,20,20,20,20,20,20,20" style="font-size: 14px;">hello world!</text>
<path d="M100,0 V200 M0,100 H200" stroke="red"/>
效果圖
例子3（text-anchor startOffset xlink:href=""）
<path id="path1" d="M 100 200 Q 200 100 300 200 T 500 200" stroke="rgb(0,255,0)" fill="none"/>
<text text-anchor="middle" x="0" y="0">
<textPath xlink:href="#path1" startOffset="50%">
hello world!hello world!
</textPath>
</text>
效果圖
例子4
<path id="path1" d="M100,300 l100,-50,200,100,100,-50" stroke="rgb(0,255,0)" fill="none"/>
<text text-anchor="middle" x="0" y="0">
<textPath xlink:href="#path1" startOffset="50%">
hello world!hello world!
</textPath>
</text>
效果圖
例子5
<path id="path1" d="M100,400 A400,300,0,0,0,500,400" stroke="rgb(0,255,0)" fill="none"/>
<text text-anchor="middle" x="0" y="0">
<textPath xlink:href="#path1" startOffset="50%">
hello world!hello world!
</textPath>
</text>
效果圖
例子6
<text x="0" y="80" transform="rotate(30,20,30),scale(1.4)">
SVG Text Rotation example
</text>
效果圖
例子7
<defs>
<path id="MyPath"
d="M 20 20
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100"/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="28">
<textPath xlink:href="#MyPath">
We go up, then we go down, then up again
</textPath>
</text>
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="black" stroke-width="2" />
效果圖
例子8
在文本中text使用tspan
<text x="15" y="30">
You are
<tspan fill="red" stroke="skyblue">not</tspan>
a banana
<tspan fill="blue" stroke="red">!!!</tspan>
</text>
效果圖
Symbol標(biāo)簽（use標(biāo)簽，復(fù)用元素標(biāo)簽）
案例
<symbol id="sym02" viewBox="0 0 150 110">
<circle cx="50" cy="50" r="40" stroke-width="8" style="stroke: red;fill: red;"/>
<circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
</symbol>
<use xlink:href="#sym02" x="0" y="0" width="100" height="50"/>
<use xlink:href="#sym02" x="0" y="50" width="75" height="38"/>
<use xlink:href="#sym02" x="0" y="100" width="50" height="25"/>
效果圖
注意：使用g標(biāo)簽和symbol標(biāo)簽的對(duì)比
不用symbol酬荞，而用g標(biāo)簽效果
<g id="sym02" viewBox="0 0 150 110">
<circle cx="50" cy="50" r="40" stroke-width="8" style="stroke: red;fill: red;"/>
<circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
</g>
<use xlink:href="#sym02" x="0" y="0" width="100" height="50"/>
<use xlink:href="#sym02" x="0" y="50" width="75" height="38"/>
<use xlink:href="#sym02" x="0" y="100" width="50" height="25"/>
效果
Switch標(biāo)簽使用
<switch>
<text systemLanguage="ar">?????</text>
<text systemLanguage="de,nl">Hallo!</text>
<text systemLanguage="en">Hello!</text>
<text systemLanguage="en-us">Howdy!</text>
<text systemLanguage="en-gb">Wotcha!</text>
<text systemLanguage="en-au">G'day!</text>
<text systemLanguage="es">Hola!</text>
<text systemLanguage="fr">Bonjour!</text>
<text systemLanguage="ja">こんにちは</text>
<text>7788</text>
</switch>
瀏覽器顯示的語(yǔ)言是什么搓劫，text就顯示哪種語(yǔ)言的文本
marker標(biāo)簽使用
屬性：refX="1" refY="5"設(shè)置箭頭位置
markerWidth="4" markerHeight="4" 設(shè)置箭頭粗細(xì)
<defs> <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="6" markerHeight="6" orient="auto"> <path d="M 0 0 L 10 5 L 0 10 z" /> </marker> </defs> <polyline points="10,90 50,80 90,20" fill="none" stroke="black" stroke-width="2" marker-end="url(#Triangle)" />
pattern標(biāo)簽使用
<defs>
<pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse">
<polygon points="5,0 10,10 0,10" style="stroke: white;fill: red;"/>
</pattern>
</defs>
<circle cx="10" cy="160" r="50" fill="url(#Triangle)"/>
顏色漸變和畫刷
漸變（徑向和線性兩種類型漸變）
線性漸變
案例
<defs>
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#1497FC"/>
<stop offset="0.5" stop-color="#A469BE"/>
<stop offset="1" stop-color="#FF8C00"/>
</linearGradient>
</defs>
<rect x="100" y="100" fill="url(#grad1)" width="200" height="150"></rect>
效果圖
補(bǔ)充：加上屬性grdientIUnits用的是世界坐標(biāo)系
徑向漸變
案例
<defs>
<radialGradient id="grad2" cx="0.5" cy="0.5" r="0.5" fx="0.6" fy="0.3">
<stop offset="0" stop-color="rgb(20,151,252)"/>
<stop offset="0.5" stop-color="rgb(164,105,190)"/>
<stop offset="1" stop-color="rgb(255,140,0)"/>
</radialGradient>
</defs>
<rect x="100" y="100" fill="url(#grad2)" width="200" height="150"></rect>
效果圖
筆刷
例子
<defs>
<pattern id="p1" x="0" y="0" width="0.8" height="0.8">
<circle cx="10" cy="10" r="5" fill="red"></circle>
<polygon points="30 10 60 50 0 50" fill="green"></polygon>
</pattern>
</defs>
<rect x="100" y="100" width="900" height="700" fill="url(#p1)" stroke="blue"></rect>
效果圖
patternUnits單位
patternUnits="userSpaceOnUse"
patternUnits="objectBoundingBox" 和patternContentUnits="objectBoundingBox"
效果圖
完整的案例：
Github地址：https://github.com/lilyping/svg_smallYellowCute
本文作者lilyping
越努力瞧哟，越幸運(yùn)
原文鏈接：http://www.reibang.com/u/3908e601f4ec
微信公眾號(hào)：BestLilyPing
github:https://github.com/lilyping
Demos源碼地址：https://github.com/lilyping
