Small pure JS SVG library
This library provides simple interface for manipulating SVG elements.
Install draw.swg.js
file from src/
directory and attach it to your view file:
<script src="draw.svg.js"></script>
Create your <svg>
element:
<svg id="svg-id"></svg>
Use drawSVG to initialize it:
drawSVG.init('svg-id');
All code is commented and easy to understand.
Before you start, you need to create an empty <path>
element by:
drawSVG.createElement('element-id');
Now you can use simple pre-made methods to draw lines using PathHelper
:
PathHelper.moveTo(10,10);
PathHelper.lineTo(20,10);
createElement() defines PathHelper itemId, so you dont need to set it by yourself, you can change it using
PathHelper.setItemId('id')
You can also use cunstructions like this:
PathHelper.moveTo(10,10).lineTo(20,10);
There is also a method to close your path:
PathHelper.closePath();
The code above will create horizontal line (10px in length).()
You can also use pre-made logic for:
- Arrow
- Rectangle(path)
- Ellipse
- Generatable line (used to generate long paths)
Example(arrow):
//Draw an arrow from (20;110) to (60;160) with id 'arrow'
drawSVG.drawObject('arrow').arrow(20, 110, 60, 160);
The code above will create arrow, pointing from (10;10) to (50;50).
If you want to initialize an object and edit it after: ('false' wil not allow drowObject() create an element automaticly.)
drawSVG.createElement('handled-ellipse');
//do some important stuff
drawSVG.drawObject('handled-ellipse', false).ellipse(400, 110, 300, 200);
The code above will create ellipse.