svgdotjs
How can we draw on existing SVG?
I draw a line on svg, now i have a button, on its click function i put a following logic:
var draw = SVG(document.getElementById('drawing')).size('100%', '100%');
var polyline = draw.polyline();
polyline.fill('none').stroke({ 'color':'red', 'linecap':'round' }).draw();
The same logic is in window onload function, which executed successfully and we can draw a polyline. But when i clicked on button i want to re-initialize this i can draw another polyline on this svg but i cant.
<script type="text/javascript">
var polyline;
var draw;
window.onload = function() {
var element = document.getElementById('drawing');
draw = SVG(element).size('100%', '100%');
polyline = draw.polyline();
polyline.fill('none').stroke({ 'color':'red', 'linecap':'round' }).draw();
element.addEventListener('mousedown', function(event){
//if right click then fire done event
if(event.which==3){
polyline.draw('done');}
});
}; //end window.load
function drawagain(){ draw = SVG(document.getElementById('drawing')).size('100%', '100%');
polyline = draw.polyline();
polyline.fill('none').stroke({ 'color':'red', 'linecap':'round' }).draw();
}
</script>
The above one is the whole code, When you click on button then function drawagain() executed.