interactive svg javascript

1// create svg element
2const svg1 = document. createElementNS("http://www.w3.org/2000/svg", "svg");
3svg1. setAttribute ("width", "100" );
4svg1. setAttribute ("height", "100" );
5
6// create a shape
7const cir1 = document. createElementNS("http://www.w3.org/2000/svg", "circle");
8cir1.setAttribute("cx", 0 );
9cir1.setAttribute("cy", 0 );
10cir1.setAttribute("r", 50);
11
12// attach the shape to svg
13svg1 . appendChild ( cir1 );
14
15// attach the svg to a element on page
16document. getElementById ('x77738'). appendChild ( svg1 );

1<svg viewBox="0 0 100 100">
2  
3  <circle cx="50" cy="50" r="50" />
4  
5  <script>
6    document.querySelector('circle').addEventListener('click', e => {
7      e.target.style.fill = "red";
8    });
9  </script>
10  
11</svg>

1// SVG.js
2var draw = SVG().addTo('#drawing')
3  , rect = draw.rect(100, 100).fill('#f06')