Question

我使用mid-marker在SVG路径的每一步显示箭头，但箭头在连接点而不是在每个路径段的末尾显示为旋转。我想画出好像每个路径段都有一条单独的行。

有没有简单的方法来实现这个目标？

显示问题的示例：

<svg width="500px" height="500px">
  <defs>
    <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
            orient="auto">
      <path d="M2,2 L2,9 L15,6 L2,4" style="fill: #000000;" />
    </marker>
  </defs>

  <path d="M100,10 L150,10 L150,60 L100,60"
        style="stroke: #6666ff; stroke-width: 1px; fill: none;
               marker-mid: url(#markerArrow);
               marker-end: url(#markerArrow);
               "
        />  
</svg>

https://jsfiddle.net/hztgzjyg/1

非常感谢

Answer 1

您需要为中间标记和结束标记使用不同的标记，因为中间标记和开始/结束标记的orient = auto角度计算方式不同。这个例子给你我想你想要的东西 - 当然，它只适用于直角折线，因为refX / Y和标记绘图必须偏移自动方向（设计用于沿着角度的二等分方向定位标记）在每组路径段之间）。

 <svg width="500px" height="500px">
<defs>
    <marker id="markerArrowMid" markerWidth="13" markerHeight="13" refX="13" refY="0"
           orient="auto">
        
        <polygon points="0,6.5 6.5,13 13,0" fill="black" stroke-width="1" stroke="black" />
        
    </marker>
    
        <marker id="markerArrowEnd" markerWidth="13" markerHeight="13" refX="2" refY="6"
           orient="auto">
        <path d="M2,2 L2,9 L15,6 L2,4" style="fill: #000000;" />
    </marker>
</defs>

<path d="M100,10 L150,10 L150,60 L100,60"
      style="stroke: #6666ff; stroke-width: 1; fill: none;
                   marker-mid: url(#markerArrowMid);
                   marker-end: url(#markerArrowEnd);
                 "

        />  
</svg>

Answer 2

systemd-nspawn --setenv=PACKAGE=$1 -b -x -M exherbo-template --bind=[...]应旋转45度，这是a reference和demo！

mid-marker

SVG中间标记位置和线性路径上的角度

2 个答案: