滤镜
剪切
用一个矩形将圆遮住一半 产生半圆效果
渐变
练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="red" /> <stop offset="35%" stop-color="orange" /> <stop offset="45%" stop-color="yellow" /> <stop offset="75%" stop-color="green" /> </linearGradient> </defs> <defs> <clipPath id="cut-off-bottom"> <rect x="0" y="0" width="200" height="100" /> </clipPath> </defs> <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" fill="url(#gradient)"/> </svg> </body> </html>
线性渐变
起始和终点中间还可以用百分比添加中间颜色
径向渐变
遮罩效果、
嵌入光栅效果
动画
缩放同时 发生坐标的偏移 这是与上一个元素的区别
animation参数
css例如opacity xml例如x y等 auto例如字体前两个中都有的话 auto自动判断
推荐css3实现动画 不用全部记下来 知道常用的部分
动画的暂停与播放
暂停
svg.pauseAnimations();
播放
svg.unpauseAnimations();
直接作用在svg整个部分上 也就是说动画要么是一起暂停要么是一起播放
svg嵌入到html中
方法一：
embed方法是是svg以一种多媒体的方式引用
方法二：
和上一种方法一样 也会把svg文件嵌套入html中
第三种：
<img src="xxx.svg"> 不会显示svg结构 直接跟引用图片一样引用
第四种：
<svg>标签直接在<body>下写
总结