SVG标记仅缩放一个具有笔划宽度的维度

Question

我有可变厚度的SVG线，并且所有这些线都在末尾有一个箭头形式的标记，就像在这个fiddle中一样。默认情况下，markerUnits设置为strokeWidth，根据线条的笔触宽度缩放箭头的两个（！）尺寸。

另一方面，我想只缩放y尺寸，如下面非常漂亮的绘画图所示（应该像橙色箭头一样，红色不是我想要的）。

这样做的原因是我想模拟从一个地方移动到另一个地方的人数，但箭头应该都具有严格相同的长度（即行长度不是视觉提示，只有笔画宽度）。

有没有办法“动态”地做到这一点;即没有一直重新计算标记的路径？是否有可以执行此操作的库，例如D3？

Answer 1

不要改变笔划宽度，而是在y方向上缩放线条，例如

＆＃13;

＆＃13;

<svg width="90%" height="90%">
    <defs>
        <marker orient="auto" viewBox="-.1 -5 10 10" id="g-arrowhead-rep">
            <path fill="#808600" class="g-marker g-rep" d="M-.1,-5L4,0L-.1,5"></path>
        </marker>
    </defs>
    <g>
        <path id="k9ffd8001" d="M10,20,200,20" stroke="#808600" stroke-width="10" transform="rotate(0 0 0)" stroke-linecap="butt" stroke-linejoin="round" fill="none" marker-end="url(#g-arrowhead-rep)"></path>
        <path id="k9ffd8001" d="M10 80 200 80" stroke="#808600" stroke-width="10" transform="translate(0, -80) scale(1,2) " stroke-linecap="butt"
        stroke-linejoin="round" fill="none" marker-end="url(#g-arrowhead-rep)"></path>
        
    </g>
</svg>

＆＃13;

＆＃13;

＆＃13;