Programmatically draw SVG icon with specific azimuth?

问题

We currently have a leaflets map that plots several points. The service (consumed by the map) includes, among other things, the coordinates and the path for a static svg icon. That's working fine.

The next step is to create the actual icon so it looks like the icon below. In this example, there are 3 "groups" with 4 "lines" each. Each "line" has its own azimuth (the angle). Also, each "line" has its own length. The angle is the same any way you look at it, but the length is in miles, since this icon will be used in a map.

I don't even know where to begin. How does one create these icons? In theory, the icons would be created and saved before they're plotted on the map. Are there libraries that do this?

回答1:

It is pretty simple to create SVGs with Javascript. There are numerous examples of how to do that on this site, and elsewhere on the web.

For example:

let svg = document.getElementById("icon");

// Add a "line" to the SVG, with a given azimuth, radius and length
function makeLine(azimuth, radius, length)
{
  let circumference = radius * 2 * Math.PI;
  // Create an SVG <circle> element
  let line = document.createElementNS(svg.namespaceURI, "circle");
  line.setAttribute("r", radius);
  line.setAttribute("stroke-dasharray", length + ' ' + circumference);
  line.setAttribute("transform", "rotate(" + azimuth + ")");
  // Add it to the <svg> element
  svg.appendChild(line);
}

let LEVEL1 = 93,
    LEVEL2 = 65,
    LEVEL3 = 37,
    LEVEL4 = 9;

makeLine(0,   LEVEL4, 15);
makeLine(120, LEVEL4, 15);
makeLine(240, LEVEL4, 15);

makeLine(310, LEVEL3, 50);
makeLine(180, LEVEL3, 55);

makeLine(290, LEVEL2, 95);

makeLine(300, LEVEL1, 110);

svg {
  width: 400px;
}

circle {
  fill: none;
  stroke: black;
  stroke-width: 14;
}

<svg id="icon" viewBox="-100 -100 200 200">
</svg>

来源：https://stackoverflow.com/questions/64706358/programmatically-draw-svg-icon-with-specific-azimuth

标签

svg

drawing

draw