Search code examples
javascriptsvgsvg.js

cant draw a path using svg.draw.js

I am making a very simple designing tool using svg.js and svg.draw.js, in which user make a simple design using line, polylines, rectangles and free hand drawing as well. svg.draw.js is an extension of svg.js which allows to draw elements with your mouse.

Now lets take a look at very simple example. If we want to make any shape (such as polyline) using svg.js, we simply do like this:

var draw = SVG('drawing').size(300, 300)
draw.polyline('0,0 100,50 50,100').fill('none').stroke({color:'blue'})
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.js"></script>
<div id="drawing">
</div>

To draw this polyline by mouse, i used svg.draw.js. Its very easy, we only have to include draw() function of this extension at the end of the above snippet. Also, we dont have to give any argument in the draw.polyline() function as well.

var draw = SVG('drawing').size(300, 300);
draw.polyline().fill('none').stroke({color:'blue'}).draw()

By including svg.draw.js library and draw() function at the end you will be able to create a polyline by mouse. For demo goto this link.

PROBLEM: Now you see that by adding draw() we can create all the svg elements by mouse clicks. By using same tactic, i want to do free hand drawing. I am using path svg element for it but it doesnot work for me.

draw.path().stroke({color:'blue'}).draw()

The above line is giving this error:enter image description here

If svg.draw.js is supporting rectangles (draw.rect()), polylines(draw.polyline()) etc then why not paths? I want to create something like this, but this free hand drawing snippet is in d3.js and i want to do it using svg.draw.js. Any help will be much appreciated.

Solution

  • You can only draw lines, rectangle or circle etc. through mouse as you mentioned using this library. svg.draw.js don't have anything like Draw.path().