Question

在SVG中，可以定义标记并将其用作箭头。有没有办法（自动）在一条线的长度中包含这些标记？

以下是一个例子：

<svg width="600px" height="200px">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" />
    </marker>
  </defs>

  <line x1="50" y1="50" x2="250" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" />
  <line x1="50" y1="100" x2="250" y2="100" stroke="#000" stroke-width="5"/>
</svg>

https://codepen.io/anon/pen/jmZLRM

此处箭头将附加到线的末端，这使得包括箭头头部的线比其自身的线长。我希望包括箭头在内的直线与没有它的直线相同。

Answer 1

更改<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="but_mirror_right">button</button> <button id="but_right">toggle</button>属性（我将该线变为红色，以便您可以更好地查看标记的结束位置）：

＆＃13;

refX

＆＃13;

如何在SVG的行长中包含箭头？

1 个答案: