以编程方式绘制具有特定方位角的SVG图标? [英] Programmatically draw SVG icon with specific azimuth?

问题描述

我们目前有一张传单地图，绘制了几个点.该服务(由地图消耗)除其他外，还包括静态 svg 图标的坐标和路径.很好.

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.

下一步是创建实际的图标，使其看起来像下面的图标.在该示例中，存在3个组".带有4条行"每个.每条线"指的是每条线".有它自己的方位角(角度).而且，每条线"都表示不".有自己的长度.角度与您看到的角度相同，但长度以英里为单位，因为此图标将在地图中使用.

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?

推荐答案

使用Javascript创建SVG非常简单.在该站点以及网络上的其他地方，都有许多有关如何执行此操作的示例.

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.

例如:

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图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！