Question 363599 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – 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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Here is how you would do it using a marker element

    <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">
  
 <defs>
   <marker id="point-circles" markerWidth="10" markerHeight="10" refX="5" refY="5">
   <circle class="st1" cx="5" cy="5" r="4" />
   </marker>
  </defs>
<style type="text/css">
    .st0{fill:#7BD0FF;fill-opacity:0.46;stroke:#3BB0FF;stroke-width:3;stroke-miterlimit:10;}
    .st1{fill:#FF4F4F; stroke: blue; stroke-width:0.5;}
</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" marker-start="url(#point-circles)" marker-mid="url(#point-circles)"/>

</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search