找到SVG多边形的点并添加手柄（圆圈）

Question

我有许多 SVG 多边形形状，需要在每个点添加手柄（圆圈）。我当然可以像这样手动添加这些圆圈：

<?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>

但是，我需要对数百个点执行此操作，当坐标已经以多边形点的形式存在时，手动输入圆的坐标似乎效率低下。

如何检测现有多边形的点并在每个点处放置一个手柄？看起来它应该非常简单，但我正在努力实现它。

Answer 1

当然 – 您可以拆分

points

属性，然后拆分每个坐标，并从那里创建元素。

请注意，这不会考虑多边形的变换等。

const svg = document.querySelector("svg");
const poly = document.querySelector(".st0");
for (const p of poly.getAttribute("points").split(" ")) {
  const [x, y] = p.split(",").map(c => parseFloat(c));
  const el = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  el.className = "st1";
  el.setAttribute("cx", x);
  el.setAttribute("cy", 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>