以编程方式绘制具有特定方位角的 SVG 图标？

Question

我们目前有一张标有多个点的传单地图。该服务（由地图使用）包括静态 svg 图标的坐标和路径等。一切正常。

下一步是创建实际的图标，使其看起来像下面的图标。在这个例子中，有 3 个“组”，每个组有 4 个“行”。每条“线”都有自己的 azimuth（角度）。此外，每条“线”都有自己的长度。从任何角度看角度都是一样的，但长度以英里为单位，因为这个图标将在地图中使用。

我什至不知道从哪里开始。如何创建这些图标？理论上，图标会在绘制到地图上之前创建并保存。有这样做的图书馆吗？

Answer 1

使用 Javascript 创建 SVG 非常简单。本网站和网络上的其他地方有很多关于如何执行此操作的示例。

例如：

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>

以编程方式绘制具有特定方位角的 SVG 图标？

Programmatically draw SVG icon with specific azimuth?

svg

drawing

draw