使用SVG Path绘图

最近一个项目，需要做个Web版本的设计器，用来进行工厂流水线布局的设计。

项目中采用了SVG.JS来做，但是以前流水线是采用单纯的画线的方式实现。客户提出希望用不同的底纹表示不同的流水线，经过一番调查，最终决定采用Path，用pattern的方式来填充底纹。

但是文档中对pattern的使用描述的比较含糊，通过一些实验，终于弄的比较清楚了。总结一下：

1、path中的X、Y参数是指以整个画面的左上角为（0,0），来设置偏移的。如果设为0，就是从(0,0)进行填充。如果在(20,20)为起点的地方，画一个RECT的PATH，里面用pattern填充30,30大小的方块。那么在这个RECT的左上角，会出现填充了10,10的一个方块，其他的部分在这个RECT之外。

2、pattern中的width、height，分别是用来设置平铺时元素的x、y轴的间隔距离的。但是要注意，这个值包含了填充形状本身的大小。同上，要想内部的填充方块的上下间距都是10。则要设置width、height分别为40（方块本身为30,30）。

3、patternTransform，用来设置填充形状的翻转角度。例如设想在一个RECT中填充一些小方块作为底纹。但RECT旋转45°时，这些小方块还是保持水平描画，就会看起来很奇怪。那么就需要用到这个参数了。设置后，填充形状也会进行对应的翻转。使用patternTransform="rotate(45)"这样的方式来指定翻转角度。

用图来说明更清楚些，但截图太麻烦，直接上代码，自己改着试试就知道了。

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<pattern id="notes" x="20" y="20" width="50" height="25" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
<rect width="20" height="20" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</pattern>
<path stroke="lightgrey" stroke-linecap="round" stroke-width="1" d="M0 0 L250 0 L250 250 L0 250 Z" />
<path style="fill:url(#notes)" stroke="lightgrey" stroke-linecap="round" stroke-width="1" d="M20 20 L200 20 L200 150 L20 150 Z" />
</svg>

另外，由于是要动态画图，所以采用了DOM的方式操纵。

具体来说，就是要先创建相应的SVG对象：

var path = document.createElementNS("http://www.w3.org/2000/svg", "path");

然后设置相应的属性：

path.setAttribute("fill", "notes");