
接着上篇文章继续往后讲解其他知识点,感谢读者们愿意花费您们宝贵时间阅读!
使用滤镜filter(也是设置阴影)

<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>
效果图

例子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>
裁剪路径和蒙板区别就是:
裁剪路径覆盖的对象要么就是全透明(可见的,位于裁剪路径内部),要么就是全不透明(不可见,位于裁剪路径外部);蒙板可以指定不同位置的透明度
裁剪主要为了设置不同形状图形,蒙版主要为了设置渐变颜色图形
(路径画法)贝塞尔曲线
<path d="M20 20 C90 40 130 40 180 20" stroke="#000000" fill="none" style="stroke-width: 2px;"></path>

三次贝塞尔曲线的原理:


其中,Catmull-Rom曲线不是标准的svg命令
案例:


动画animate方面:
动画原理

动画标签

动画元素,属性定位,动画参数

定位:

动画标签被包含在目标元素里:

基本animate标签属性设置:

fill属性设置:
fill=”freeze”,设置freeze时,动画就停止在to的数值位置;其他属性表示:remove回原位
repeatCount=“100”,表示次数为100;其他属性表示:循环indefinite,一次:forwards
动画叠加
animate标签:

animateTransform标签:(不能叠加)

轨迹路径:

案例
例子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:
沿着路径运动
<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>
效果图

线性变换:

旋转变换transform(会经常在绘制图形时,改变其状态,用到它)

文本text
属性: dx、dy属性,切线和法线方向的偏移;dx是设置字体之间的间隙,dy是设置字体间纵坐标的位置;x、text-anchor、startOffset属性,确定排列起始位置
文本垂直居中问题

textPath使用方法:

加在文本的超链接(a标签)
Xlink:href 指定连接地址
Xlink:title 指定连接提示
Target 指定打开目标

文本旋转

设置文本路径(可以取消路径颜色,也可以设置路径颜色)

案例
例子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标签(use标签,复用元素标签)

案例
<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标签和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"/>
效果

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)" />

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)"/>

颜色渐变和画刷
渐变(径向和线性两种类型渐变)
线性渐变


案例
<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>
效果图

补充:加上属性grdientIUnits用的是世界坐标系

径向渐变

案例
<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
越努力,越幸运
原文链接:https://www.jianshu.com/u/3908e601f4ec
微信公众号:BestLilyPing
github:https://github.com/lilyping
Demos源码地址:https://github.com/lilyping
网友评论