SVG固定大小的元素相对放置在视图框中

Question

[在下面的示例SVG中，如何在给标记/图钉（红色圆圈）一个固定大小（以像素为单位）的同时将其相对定位在其父对象viewbox中？也就是说，标记/图钉在视觉上总是相同的大小，但可以轻松地将其放置在我们正在查看的地图的相对位置。

我们已在此处将代码添加到小提琴中：https://jsfiddle.net/krbgxqtm/13/

附加评论：

• 我们希望避免使用客户端代码（即JavaScript）。
• 由于其位于其中的响应位置，我们不会总是确切知道容器的尺寸。
• 我们已经看到了使用CSS background-image实现尺寸调整的示例，但这将无法满足周围超链接的大小。

Answer 1

由于您的图钉是一个圆，因此可以使用很短的线stroke-linecap="round" vector-effect="non-scaling-stroke"。 stroke-linecap="round"将使该线具有一个圆的轮廓。 vector-effect="non-scaling-stroke"将使行不缩放。