SVG 绝对线标记大小

Question

我有一堆 SVG 代表使用折线的旅行。

我正在使用非缩放笔划矢量效果来确保每条折线都以绝对宽度呈现。所以当viewBox的尺寸改变时，折线的宽度不会改变。

在提到的折线的末端，我想放置标记。我也希望标记具有绝对大小。我认为通过将标记单位设置为 strokeWidth 应该很容易。

与多段线笔划的情况相反，多段线末端标记的大小确实会随着 viewBox 的大小而变化。

下面我提供了一个示例，其中我使用简单的圆圈作为标记。

<svg preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" viewBox="131890.80533333332 85178.93015415945 198.25991111111944 205.10300513348193">
  <defs>
    <marker id="end" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20">
      <circle cx="8" cy="16" fill="#000" r="4"></circle>
    </marker>
    <marker id="start" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20">
      <circle cx="8" cy="16" fill="#000" r="4"></circle>
    </marker>
  </defs>
  <g>
    <polyline fill="none" marker-end="url(#end)" marker-start="url(#start)" stroke="#000" stroke-linejoin="round" stroke-width="3" vector-effect="non-scaling-stroke" points="132089.06524444444, 85384.03315929293 131890.80533333332, 85178.93015415945">
    </polyline>
  </g>
</svg>

<svg preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" viewBox="132038.56071111112 85364.68902323228 50.557866666669725 19.330493533576373">
  <defs>
    <marker id="end" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20">
      <circle cx="8" cy="16" fill="#000" r="4"></circle>
    </marker>
    <marker id="start" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20">
      <circle cx="8" cy="16" fill="#000" r="4"></circle>
    </marker>
  </defs>
  <g>
    <polyline fill="none" marker-end="url(#end)" marker-start="url(#start)" stroke="#000" stroke-linejoin="round" stroke-width="3" vector-effect="non-scaling-stroke" points="132038.56071111112, 85364.68902323228 132089.1185777778, 85384.01951676585">
    </polyline>
  </g>
</svg>

另请参阅：https://jsfiddle.net/u4bmupza/3/

我是否遗漏了一些 SVG 属性，或者我应该手动计算标记的大小？

Answer 1

vector-effect="non-scaling-stroke 首次引入是在 SVG 1.2 Tiny。这是 SVG 的一个子集，用于功率有限的移动设备。 SVG 1.2 没有标记，所以这个问题不是问题。

vector-effect 是浏览器最终实现的 SVG 1.2 Tiny 中唯一的东西。不幸的是，这个问题当时显然被遗漏了，我想也没有人懒得将其报告为错误。虽然我已经看到它在 S.O 上被问到过。以前。

好消息是 SVG2 规范 specifically notes it as something that should be addressed，尽管现在对您没有帮助。

SVG 绝对线标记大小

SVG absolute line marker size

svg

markers