image.png
最近接触扬州电厂项目，了解了关于SVG的内容，下面我就记录一下自己使用的心得。
首先，我们很容易地可以搜索到很多svg的使用指南，例如阮老师的SVG 图像入门教程，很轻松地通过上面的例子实现HTML嵌入svg并实现矩形、折线等相关效果，这些就不用重复赘述了，主要吐槽一下这复杂的使用操作。
（1）svg可以很好地进行页面的自适应（设置viewBox）。
（2）JavaScript可以很好地操作svg里的元素，实现相关的功能，例如上图数字hover后的tooltip效果，麻烦点在于要不停地计算坐标的位置。
（3）svg可以通过定义 marker 标签，很好的实现箭头的效果，箭头可以根据折线或直线的方向自适应。
<!-- 箭头的定义 -->
<defs>
<marker
id="arrow"
markerWidth="10"
markerHeight="10"
refX="0"
refY="3"
orient="auto"
markerUnits="strokeWidth"
>
<path d="M0,0 L0,6 L5,3 z" fill="#cbcbcb"></path>
</marker>
</defs>
<!-- 箭头的使用-->
<polyline
points="490,127 506,127 506,86"
fill="none"
stroke="#cbcbcb"
marker-end="url(#arrow)"
></polyline>
（4）rect、text等标签都是无法嵌套的（更不用说svg里面嵌套html代码了），例如如果希望再矩形里面显示字，必须重新写一个text标签定位到rect元素内部；如果在某个地方显示一行文字，中间有个别文字是其他颜色，也必须分为不同的text进行定位 :tw-1f31d:。
（5）使用 g 标签组合图形，在其他地方使用到组合图形只能是个复制、粘贴的作用，不能动态地修改里面的任何东西，包括文字。
总之，svg让人头疼的就是不停的定位定位定位！！！
最后对比一下svg和canvas：
（因为本项目的svg图会存在一些操作dom元素，交互的一些内容，所以毫不犹豫地选择了svg。）
svg是一种基于XML描述2D图像的语言；canvas是通过JavaScript来绘制2d图形。
| canvas | svg |
|---|---|
| 依赖分辨率 | 不依赖分辨率，可以很好的自适应 |
| 不支持事件处理器 | 支持事件处理器 |
| 弱的文本渲染能力 | 最适合带有大型渲染区域的应用程序 |
| 能够以.png或.jpg保存图像 | 复杂度高会减慢渲染速度 |
| 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 | 不适合游戏应用 |
网友评论