SVG绝对线标记大小答案

【问题标题】：SVG absolute line marker sizeSVG绝对线标记大小
【发布时间】：2017-10-15 13:54:24
【问题描述】：

我有一堆使用折线表示旅行的 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 属性还是应该手动计算标记的大小？

【问题讨论】：

标签： svg markers

【解决方案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，尽管现在这对您没有帮助。

【讨论】：

感谢您的提醒。我想我必须自己定位和调整它们的大小。