SVG Circles svg xmlns http www w3 org 2000 svg viewBox 0 0 300 200 rect x 0 y 0 width 300 height 300 fill eee rect circle id target cx 100 cy 100 r 30 circle ellipse cx 200 cy 80 rx 10 ry 50 text x 0 y 15 fill red Yellow text rect 10 0 y 25 width 20 height 30 svg script var moveSlider function slider direction var value slider value var circle document getElementById target var coord c direction circle setAttributeNS null coord value 5 script X input type range min 1 max 60 value 20 oninput moveSlider this x br Y input type range min 1 max 40 value 10 oninput moveSlider this y br br SVG Text document body style minHeight 300px var svg document createElementNS http www w3 org 2000 svg svg document body appendChild svg svg style border 1px solid blue svg style height 200px svg style width 200px var element document createElementNS http www w3 org 2000 svg text element setAttributeNS null x 0 element setAttributeNS null y 15 y is the bottom of the text var txt document createTextNode Hello World element appendChild txt svg appendChild element style line hover rect hover circle hover ellipse hover text hover fill blue stroke blue style svg style border 1px solid green width 400px height 400px id svg xmlns http www w3 org 2000 svg svg br Shape select id shape option value line Line option option value rect Recangle option option value circle Circle option option value ellipse Ellipse option option value text Text option select Color select id color option value ff0099 Pink option option value f3f313 Yellow option option value 0dd5fc Blue option option value 83f52c Green option select script const svg document getElementById svg let svgshape null selected shape const addSVGObject const shape document getElementById shape value const color document getElementById color value console log shape type shape ref https www w3schools com graphics svg_polygon asp let newshape null switch shape case line newshape document createElementNS http www w3 org 2000 svg line break case circle newshape document createElementNS http www w3 org 2000 svg circle break case rect newshape document createElementNS http www w3 org 2000 svg rect break case ellipse newshape document createElementNS http www w3 org 2000 svg ellipse break case text newshape document createElementNS http www w3 org 2000 svg text break default console log error unknown shape type newshape setAttributeNS null type shape newshape setAttributeNS null stroke color newshape setAttributeNS null stroke width 2 newshape setAttributeNS null fill opacity 0 newshape textContent test newshape setAttributeNS null text anchor middle newshape style fontSize 40pt newshape style fontFamily Arial svg appendChild newshape return newshape svg onmousedown e let x e pageX let y e pageY svgshape addSVGObject svgshape setAttributeNS null x1 x svgshape setAttributeNS null y1 y svgshape setAttributeNS null x x svgshape setAttributeNS null y y svgshape setAttributeNS null cx x svgshape setAttributeNS null cy y document body onmousemove e if svgshape return let x e pageX let y e pageY svgshape setAttributeNS null x2 x svgshape setAttributeNS null y2 y if svgshape getAttributeNS null type rect let x0 svgshape getAttributeNS null x let y0 svgshape getAttributeNS null y svgshape setAttributeNS null width x x0 svgshape setAttributeNS null height y y0 svgshape setAttributeNS null rx 5 svgshape setAttributeNS null ry 5 let cx svgshape getAttributeNS null cx let cy svgshape getAttributeNS null cy if svgshape getAttributeNS null type circle svgshape setAttributeNS null r x cx if svgshape getAttributeNS null type ellipse svgshape setAttributeNS null rx x cx svgshape setAttributeNS null ry y cy if svgshape getAttributeNS null type text svgshape setAttributeNS null x x svgshape setAttributeNS null y y document body onmouseup event svgshape null console log ready script
svg line break case circle newshape document createElementNS http www w3 org 2000 svg circle break case rect newshape document createElementNS http www w3 org 2000 svg rect break case ellipse newshape document createElementNS http www w3 org 2000 svg ellipse break case text newshape document createElementNS http www w3 org 2000 svg text break default console log error unknown shape type newshape setAttributeNS null type shape newshape setAttributeNS null stroke color newshape setAttributeNS null stroke width 2 newshape setAttributeNS null fill opacity 0 newshape textContent test newshape setAttributeNS null text anchor middle newshape style fontSize 40pt newshape style fontFamily Arial svg appendChild newshape return newshape svg onmousedown e let x e pageX let y e pageY svgshape addSVGObject svgshape setAttributeNS null x1 x svgshape setAttributeNS null y1 y svgshape setAttributeNS null x x svgshape setAttributeNS null y y svgshape setAttributeNS null cx x svgshape setAttributeNS null cy y document body onmousemove e if svgshape return let x e pageX let y e pageY svgshape setAttributeNS null x2 x svgshape setAttributeNS null y2 y if svgshape getAttributeNS null type rect let x0 svgshape getAttributeNS null x let y0 svgshape getAttributeNS null y svgshape setAttributeNS null width x x0 svgshape setAttributeNS null height y y0 svgshape setAttributeNS null rx 5 svgshape setAttributeNS null ry 5 let cx svgshape getAttributeNS null cx let cy svgshape getAttributeNS null cy if svgshape getAttributeNS null type circle svgshape setAttributeNS null r x cx if svgshape getAttributeNS null type ellipse svgshape setAttributeNS null rx x cx svgshape setAttributeNS null ry y cy if svgshape getAttributeNS null type text svgshape setAttributeNS null x x svgshape setAttributeNS null y y document body onmouseup event svgshape null console log ready script