image.png
浏览器支持情况
IE9+、Chrome33.0+、Firefox 28.0+、Safari 7.0+
svg的视窗，视野
image.png
canvas与svg两者区别:
canvas:
1)依赖分辨率
2）不支持事件处理器
3）弱的文本渲染能力
4）能够以.png或.jpg格式保存结果图像
5）最适合图像密集型的游戏，其中的许多对象会被频繁重绘
应用场景：提供的功能更原始，适合像素处理，动态渲染和大数据量绘制
Canvas可以针对比较复杂动画制作
svg：
1）不依赖分辨率
2）支持事件处理器
3）最适合带有大型渲染区域的应用程序（比如谷歌地图）
4）复杂度高会减慢渲染速度（任何过度使用DOMD的应用都不快）
5）不适合游戏应用
应用场景：功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景
Svg可以用来制作logo等
基本图形和属性
Path路径设置：
字符串
image.png
命令
image.png
image.png
命令基本规律
区分大小写：大写表示坐标参数为绝对位置，小写则为相对位置
最后的参数表示最终要到达的位置
上一个命令结束的位置就是下一个命令开始的位置
命令可以重复参数表示重复执行同一条命令
案例
image.png
image.png
image.png
M移动位置可以重新设置
image.png
<path d="M200 200 h300 v100 l100 -100" stroke="red" fill="none"/>
效果图
image.png
<path d="M200 200 h300 v100 l100 -100" stroke="red"/>
image.png
矩形rect
image.png
例子
<svg>
<rect x="10" y="10" rx="10" ry="10" width="150" height="100" stroke="red" fill="none" /></rect>
</svg>
效果图
image.png
圆形circle
image.png
例子
<circle cx="250" cy="60" r="50" stroke="green" fill="none">
</circle>
效果图
image.png
椭圆ellipse
image.png
例子
<ellipse cx="150" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"></ellipse>
效果图
image.png
直线line
image.png
画法：
和多边形的画法很像，都根据顶点来画（宽高和位置都需要根据顶点数值来调）
image.png
image.png
例子
<line x1="10" y1="120" x2="460" y2="420" stroke="blue"></line>
效果图
image.png
折线points
image.png
image.png
画法：
image.png
image.png
例子
<polyline points="20,20,40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3"></polyline>
效果图
image.png
多边形polygon
image.png
五角星画法：
<polygon points="122 59,72 205,194 114,49 114,171 205" stroke="red" fill="rgb(36, 108, 140)" />
正方形画法：
<polygon points="10 30,10 100,100 100,100 30" stroke="red" fill="rgb(36, 108, 140)" />
其他图形一般画法：
（长宽都是在坐标里面改，还有位置--记得在对应坐标改，才能形成你想要的模样）
image.png
image.png
例子
<polygon points="220,10 300,210 170,250 123,234" style="fill:blue;stroke:purple;stroke-width:1" />
效果图
image.png
弧线设置
属性：
image.png
image.png
image.png
案例：
image.png
image.png
image.png
（设置fill="none",）
<path d="M200 200 A200 100 0 1 1 300 300" stroke="red" fill="none"/>
效果图
image.png
没加上fill属性，默认填充为黑色
<path d="M200 200 A200 100 0 1 1 300 300" stroke="red"/>
效果图
image.png
填充，描边和变换
fill,stroke,stroke-width,transform
image.png
完整的案例：
image.png
Github地址：https://github.com/lilyping/svg_smallYellowCute
由于svg知识篇幅有点多，方便简书小伙伴们更好阅读，分开（一）和（二）篇；文章有些知识点借鉴网上的，感谢提供资料的作者；同时希望总结这些知识点，可以帮到读者们，若文章有写的不好或有错误，请指正和体谅；祝大家心想事成！
本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping
网友评论