image.png
接着上篇文章继续往后讲解其他知识点，感谢读者们愿意花费您们宝贵时间阅读！
使用滤镜filter（也是设置阴影）
image.png
<filter>标记里的id属性定义了这个滤镜的唯一标志
<rect>标记里的filter属性定义了需要引用的滤镜是“f1”
蒙版
使用蒙版需要在使用前在<defs>中定义<mask>并为其设置一个唯一id，然后在需要应用蒙版的元素上添加一条属性mask=”url(#id)”
设置有了蒙版，还需要在蒙版中添加图形元素并指定黑白颜色
案例
例子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>
效果图
image.png
例子2
裁剪前
image.png
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>
裁剪后
image.png
例子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>
效果图
image.png
裁剪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>
裁剪路径和蒙板区别就是：
裁剪路径覆盖的对象要么就是全透明(可见的，位于裁剪路径内部)，要么就是全不透明(不可见，位于裁剪路径外部)；蒙板可以指定不同位置的透明度
裁剪主要为了设置不同形状图形，蒙版主要为了设置渐变颜色图形
（路径画法）贝塞尔曲线
<path d=”M20 20 C90 40 130 40 180 20″ stroke=”#000000″ fill=”none” style=”stroke-width: 2px;”></path>
image.png
三次贝塞尔曲线的原理：
image.png
image.png
其中，Catmull-Rom曲线不是标准的svg命令
案例：
image.png
image.png
动画animate方面：
动画原理
image.png
动画标签
image.png
动画元素，属性定位，动画参数
image.png
定位：
image.png
动画标签被包含在目标元素里：
image.png
基本animate标签属性设置：
image.png
fill属性设置：
fill=”freeze”，设置freeze时，动画就停止在to的数值位置；其他属性表示：remove回原位
repeatCount=“100”，表示次数为100；其他属性表示：循环indefinite，一次:forwards
动画叠加
animate标签:
image.png
animateTransform标签：（不能叠加）
image.png
轨迹路径：
image.png
案例
例子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>
效果图
image.png
例子2：
image.png
<rect x=”10″ y=”10″ width=”100″ height=”100″>
<animate attributeType=”XML” attributeName=”x” from=”100″ to=”120″
dur=”2s” repeatCount=”forwards”/>
</rect>
效果图
image.png
例子3：
沿着路径运动
<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>
效果图
image.png
线性变换：
image.png
旋转变换transform（会经常在绘制图形时，改变其状态，用到它）
image.png
文本text
属性： dx、dy属性，切线和法线方向的偏移；dx是设置字体之间的间隙，dy是设置字体间纵坐标的位置；x、text-anchor、startOffset属性，确定排列起始位置
文本垂直居中问题
image.png
textPath使用方法：
image.png
加在文本的超链接（a标签）
Xlink:href 指定连接地址
Xlink:title 指定连接提示
Target 指定打开目标
image.png
文本旋转
image.png
设置文本路径（可以取消路径颜色，也可以设置路径颜色）
image.png
案例
例子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”/>
效果图
image.png
例子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”/>
效果图
image.png
例子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>
效果图
image.png
例子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>
效果图
image.png
例子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>
效果图
image.png
例子6
<text x=”0″ y=”80″ transform=”rotate(30,20,30),scale(1.4)”>
SVG Text Rotation example
</text>
效果图
image.png
例子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″ />
效果图
image.png
例子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>
效果图
image.png
Symbol标签（use标签，复用元素标签）
image.png
案例
<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″/>
效果图
image.png
注意：使用g标签和symbol标签的对比
不用symbol，而用g标签效果
<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″/>
效果
image.png
Switch标签使用
<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>
浏览器显示的语言是什么，text就显示哪种语言的文本
marker标签使用
属性：refX=”1″ refY=”5″设置箭头位置
markerWidth=”4″ markerHeight=”4″ 设置箭头粗细
<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)” />
image.png
pattern标签使用
<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)”/>
image.png
颜色渐变和画刷
渐变（径向和线性两种类型渐变）
线性渐变
image.png
image.png
案例
<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>
效果图
image.png
补充：加上属性grdientIUnits用的是世界坐标系
image.png
径向渐变
image.png
案例
<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>
效果图
image.png
笔刷
image.png
例子
<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>
效果图
image.png
patternUnits单位
patternUnits=”userSpaceOnUse”
image.png
patternUnits=”objectBoundingBox” 和patternContentUnits=”objectBoundingBox”
image.png
效果图
image.png
完整的案例：
image.png
Github地址：https://github.com/lilyping/svg_smallYellowCute
本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping
