Can you use polar coordinates in an SVG file?

user_339681 0
Viewed 961

I am making SVGs that would make much more sense in polar coordinates, however I cannot seem to find any documentation.

I would like something like this:

<path d="M0 0 L polar(1, 45deg)" />

Or perhaps there is a way to calculate the (x, y) in javascript first? Is that possible?

svg
1 Answers

Or perhaps there is a way to calculate the (x, y) in javascript first? Is that possible?

You have to generate the path description in Javascript first, then update your d attribute.

Here's some simple example code.

var  pathD = [];

move(pathD, 0, 0);
linePolar(pathD, 1, 45);
linePolar(pathD, 1, 120);
linePolar(pathD, 1.5, 200);
linePolar(pathD, 1, 270);

mypath = document.getElementById("mypath");
mypath.setAttribute("d", pathD.join(' '));



// Move to cartesian coordinates x,y
function move(pathArray, x, y)
{
  pathArray.push('M', x, y);
}

// Draw a line to polar coordinates defined by radius and angle
function linePolar(pathArray, radius, angle)
{
  pathArray.push('L', radius * Math.cos(angle * Math.PI/180), radius * Math.sin(angle * Math.PI/180));
}
path {
  fill: lightblue;
  stroke: black;
  stroke-width: 0.02px;
}
<svg width="300" viewBox="-2 -2 4 4">
  <path id="mypath" d="" />
</svg>

user_12928480
Related