Svg实战总结（二）
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
