Find SVG polygon's points and add handles (circles)

I have a number of SVG polygon shapes which need handles (circles) added at every point. I can of course add these circles manually like this:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#7BD0FF;fill-opacity:0.46;stroke:#3BB0FF;stroke-width:3;stroke-miterlimit:10;}
    .st1{fill:#FF4F4F;}
</style>
<polygon class="st0" points="266.14,191.92 471.86,127.15 530.52,302.39 666.14,388.49 550.33,633.06 225.76,580.49 359.86,363.34 
    153.38,388.49 "/>

<circle class="st1" cx="266.14" cy="191.92" r="8"/>
<circle class="st1" cx="471.86" cy="127.15" r="8"/>
<circle class="st1" cx="530.52" cy="302.39" r="8"/>
<circle class="st1" cx="666.14" cy="388.49" r="8"/>
<circle class="st1" cx="550.33" cy="633.06" r="8"/>
<circle class="st1" cx="225.76" cy="580.49" r="8"/>
<circle class="st1" cx="359.86" cy="363.34" r="8"/>
<circle class="st1" cx="153.38" cy="388.149" r="8"/>

</svg>

However, I need to do this for hundreds of points, and entering the coordinates for the circles manually seems inefficient when the coordinates already exist in the form of polygon points.

How do I detect the existing polygon's points and place a handle at each one? It seems like it should be really simple but I'm struggling to get anywhere with it.

Solution

Sure – you can split the points attribute, then split each coordinate, and create elements from there.

Note that this will not take the polygon's transforms, etc. into account.

const svg = document.querySelector("svg");
const poly = document.querySelector(".st0");
for (const p of poly.points) {
  const el = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  el.setAttribute("class", "st1");
  el.setAttribute("cx", p.x);
  el.setAttribute("cy", p.y);
  el.setAttribute("r", 8);
  svg.appendChild(el);
}

.st0 {
  fill: #7BD0FF;
  fill-opacity: 0.46;
  stroke: #3BB0FF;
  stroke-width: 3;
  stroke-miterlimit: 10;
}

.st1 {
  fill: #FF4F4F;
}

<svg width="800" height="800">
<polygon class="st0" points="266.14,191.92 471.86,127.15 530.52,302.39 666.14,388.49 550.33,633.06 225.76,580.49 359.86,363.34 153.38,388.49"/>
</svg>