SVG: how to draw multiple semicircles (arcs) path

Question

Using the answer from this thread I was able to draw a semicircle (arc):

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle) {

  var start = polarToCartesian(x, y, radius, endAngle);
  var end = polarToCartesian(x, y, radius, startAngle);

  var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

  var d = [
    "M", start.x, start.y,
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
  ].join(" ");
  console.log(d)
  return d;
}

window.onload = function() {
  document.getElementById("arc1").setAttribute("d", describeArc(100, 100, 50, -90, 90));
};

<svg width="1000" height="1000">
  <path id="arc1" fill="red" stroke="#446688" stroke-width="2" />
</svg>

What I'm trying to achieve is to be able to draw an SVG as a path consistent with many arcs (semicircles) and be able to set fill on them.

Something like this:

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 100 A 10 10 0 0 1 100 100 M 100 100 A 10 10 0 0 1 150 100 M 150 100 A 10 10 0 0 1 200 100 M 200 100 A 10 10 0 0 1 250 100" fill="red" stroke="blue" stroke-width="3" />
</svg>

Is there a better way to achieve a simpler path? For now, it looks like this:

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 100 A 10 10 0 0 1 100 100 M 100 100 A 10 10 0 0 1 150 100 M 150 100 A 10 10 0 0 1 200 100 M 200 100 A 10 10 0 0 1 250 100" fill="red" stroke="blue" stroke-width="3" />
</svg>

Or do I have to generate a longer and longer path when there are, let's say, 30 semicircles?

Edit: the IE9+ support is required. Also, those elements will be clickable, draggable and controllable. By controllable I mean that their number and size will change when mouse clicking/moving.

I choose my first approach with a dynamic very long path.

Thanks!

Answer 1

For this I would use lower case commands. For example this is drawing the arc you need: an arc with a radius of 25 and an ending point 50 units ( 2 * 25 ) away from the starting point of the arc.

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 100 a 25 25 0 0 1 50 0" fill="red" stroke="blue" stroke-width="3" />
</svg>

In order to get a path of 4 arcs you need to repeat the arc (a 25 25 0 0 1 50 0) 4 times something like this:

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 100 a 25 25 0 0 1 50 0 
                    a 25 25 0 0 1 50 0 
                    a 25 25 0 0 1 50 0 
                    a 25 25 0 0 1 50 0 " fill="red" stroke="blue" stroke-width="3" />
</svg>

It's easy to see how you can use javascript to generate the d attribute you need:

let d ="M 50 100";

for(let i=0; i<4;i++){d +="a 25 25 0 0 1 50 0 "}

document.querySelector("path").setAttribute("d",d);

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 100" fill="red" stroke="blue" stroke-width="3" />
</svg>