svg 使用心得

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保存图像	复杂度高会减慢渲染速度
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用