svg之defs以及use的使用

首先说需求：要求做一个可复制拉伸的线，也就是不是伸长，而是复制
类似下图：拉伸之前

拉伸之后：

那么这是怎么做到呢？下面来说一说
首先需要了解svg的defs以及use是什么

SVG的 元素用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组，并用 元素来定义它，然后你就可以在SVG图像中将它当做简单图形来重复使用 ---------------------声明
SVG 元素可以在SVG图像中多次重用一个预定义的SVG图形，包括 元素和元素。被重用的图形可以在定义 的内部（图形将不可见直到使用use来引用它）或外部-------------------引用
可操作拉伸的svg的结构如下图

很明显上面defs 声明要重复使用的标签
下边use 通过id 引用defs声明的标签
那么在调用鼠标移动拉伸事件的时候就可以根据宽度来进行判断是否需要再创建use

var _use = document.createElementNS(par.SVG_NS, 'use');
_use.setAttributeNS(par.XLINK_NS,'xlink:href','#'+origin.id);
 if(usel){
     _use.setAttribute('transform','translate('+usetranslate+' 0)'); // 需要位移，否则会重叠
 };