The SVG DOM manipulator 

The app we're going to build will allow you to click and add three different kinds of SVG element to an SVG canvas. The interface will allow you to click on the item you want to add (rect, circle, or text) and then you will be able to click on the canvas and add that element to the screen at those particular (x,y) coordinates. With that element selected, you will then be able to edit it by changing several available properties.

This example will use Bootstrap to simplify laying out the different form fields and to create a simple modal to edit the properties. Because of that, jQuery will also be included, although, for this version of the demo at least, jQuery interactions will be kept to a minimum; we'll focus on ...

Get Mastering SVG now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.