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的唯一内容。不幸的是，当时显然错过了这个问题，我想没有人会把它作为一个bug报告。虽然我已经看到它询问S.O.先前。

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

SVG绝对线标记大小

1 个答案: