svg绘制标尺和网格背景

svg绘制标尺和网格背景

目录

1，效果图

2，原理

3，代码

---

网页上绘制背景网格和标尺有多种方法，

       a），使用css的border-bottom属性绘制，优点是简单，缺点是难以控制尺寸伸缩；

       b），使用canvas绘制，优点是可以动态控制，缺点是canvas会产生锯齿，不清晰等情况；

       c），使用svg来绘制，优点是可以动态控制切清晰，缺点是难度稍大，好在使用snap.svg可以很好的简化代码。

1，效果图

2，原理

采用svg插件snap.svg，地址：Snap.svg - Home，开源免费，下载即可

网格一般来说都是绘制80*80像素的大格子，每个小格子是20*20像素，大格子比小格子线更细。

标尺分为横标尺，竖标尺，竖标尺采用svg绘制后再进行文字旋转90度，每个格子是20像素，这样恰好和网格对齐。

3，代码