Svg实战总结（一）

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

M移动位置可以重新设置

image.png

效果图

image.png

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

例子
<line x1="10" y1="120" x2="460" y2="420" stroke="blue"></line>

效果图

image.png

折线points

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

例子
<polygon points="220,10 300,210 170,250 123,234" style="fill:blue;stroke:purple;stroke-width:1" />

效果图

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

Svg实战总结（一）