为了账号安全,请及时绑定邮箱和手机立即绑定

Svg实战总结(二)

webp

image.png

接着上篇文章继续往后讲解其他知识点,感谢读者们愿意花费您们宝贵时间阅读!

使用滤镜filter(也是设置阴影)

webp

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

webp

image.png

例子2
裁剪前


webp

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>

裁剪后


webp

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>

效果图


webp

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>


webp

image.png

三次贝塞尔曲线的原理:


webp

image.png

webp

image.png

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

案例:


webp

image.png

webp

image.png

动画animate方面:

动画原理


webp

image.png

动画标签


webp

image.png

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


webp

image.png

定位:


webp

image.png

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


webp

image.png

基本animate标签属性设置:


webp

image.png

fill属性设置:
fill=”freeze”,设置freeze时,动画就停止在to的数值位置;其他属性表示:remove回原位

repeatCount=“100”,表示次数为100;其他属性表示:循环indefinite,一次:forwards

动画叠加
animate标签:


webp

image.png

animateTransform标签:(不能叠加)


webp

image.png

轨迹路径:

webp

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>

效果图


webp

image.png

例子2:


webp

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>

效果图


webp

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>

效果图

webp

image.png

线性变换:


webp

image.png

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


webp

image.png

文本text

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

文本垂直居中问题


webp

image.png

textPath使用方法:


webp

image.png

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


webp

image.png

文本旋转


webp

image.png

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


webp

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

效果图


webp

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

效果图


webp

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>

效果图


webp

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>

效果图


webp

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>

效果图


webp

image.png

例子6
<text x="0" y="80" transform="rotate(30,20,30),scale(1.4)">
SVG Text Rotation example
</text>

效果图


webp

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

效果图


webp

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>

效果图


webp

image.png

Symbol标签(use标签,复用元素标签)

webp

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

效果图


webp

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

效果


webp

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

webp

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

webp

image.png

颜色渐变和画刷

渐变(径向和线性两种类型渐变)

线性渐变


webp

image.png

webp

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>

效果图


webp

image.png

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


webp

image.png

径向渐变


webp

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>

效果图


webp

image.png

笔刷


webp

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>

效果图


webp

image.png

patternUnits单位
patternUnits="userSpaceOnUse"


webp

image.png

patternUnits="objectBoundingBox" 和patternContentUnits="objectBoundingBox"

webp

image.png

效果图


webp

image.png

完整的案例:


webp

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



作者:lilyping
链接:https://www.jianshu.com/p/995c3fb86f2c


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消