SVG Drawer简介
SVG Drawer 还在开发中,当前已经完成了大部分静态绘制模块。这些模块,以及本文档,均可能在随后的持续开发中有所更改。
SVG Drawer 使用 JavaScript 开发,以链模式实现绘制指令的下达。开发目的旨在简化 SVG 图案的绘制工作,也能让使用者从中深入学习 SVG。
下面两种方法都可以在页面中使用 svgdrawer.js,引用插件后,需要声明画笔对象,然后通过对象绘制各种图形 ——
<!-- 先准备一个 svg 元素 --> <svg id="mysvg" width="800" height="400"></svg> <!-- 方法一 :适用于自由页面环境,引用在先使用在后 --> <script src="./svgdrawer.js" charset="utf-8"></script> <script> //声明画笔 :以后就可以使用 dr 指令绘制图案 var dr = _dr(mysvg); dr.circle(50,50,25).fill('red'); //画圆 </script> <!-- 方法二 适用于论坛环境 绘制代码放在 onload 事件模块内 --> <script> var sc = document.createElement('script'); sc.src = './svgdrawer.js'; sc.charset = 'utf-8'; document.head.appendChild(sc); sc.onload = () => { //声明画笔 :以后就可以使用 dr 指令绘制图案 var dr = _dr(mysvg); dr.ellipse(50,50,20,30,'green'); //画椭圆 }; </script>
特别注意:所有的绘制指令若有参数,凡是数字的参数可以直接使用,凡是非数字的均需要使用小角单或双引号包裹起来,引号应前后一致。