带标记且无溢出的Svg

Question

我需要显示一个箭头来显示某些指标的演变，为此，我创建了一个绘制直线的算法，并使用标记使其具有箭头的形状。

我尝试更改refX，使标记在结尾处结束，但由于行很粗，它会在标记之后显示行的其余部分。我可以减少更改此refX的方式，使我看不到该行的其余部分，但我希望在svg的限制内看到整个标记。

我也可以减少线的长度，这样线+标记占据了整个位置，但是我找不到需要删除的像素数。

行是动态呈现的，这意味着它不会总是以这种方式呈现。在svg(x，y)中，从(0,0)到(100,100)可以从(100,0)到(100,100)。

当前的代码显示了溢出svg的箭头，我想把所有的东西都放进去。

​

<svg class="svg" style="height: 190px; width: 328px; border:1px solid blue;">
        <marker class="red_arrow_normal" markerUnits="strokeWidth" viewBox="0 0 10 10" refY="6" orient="auto"
            markerHeight="10" markerWidth="10" id="red-3" refX="10">
            <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: red;"></path>
        </marker>
        <line x1="0" y1="0" x2="328" y2="190" stroke="red" stroke-width="10" marker-end="url(#red-3)"></line>
    </svg>

​

Answer 1

您可以在codepen here中对其进行在线编辑。我已经修改了宽度和高度。

​

<svg class="svg" style="height: 190px; width: 328px; border:1px solid blue;">
        <marker class="red_arrow_normal" markerUnits="strokeWidth" viewBox="0 0 10 10" refY="6" orient="auto"
            markerHeight="10" markerWidth="10" id="red-3" refX="9">
            <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: red;"></path>
        </marker>
        <line x1="0" y1="0" x2="320" y2="180" stroke="red" stroke-width="10" marker-end="url(#red-3)"></line>
    </svg>

​

Answer 2

这个问题看起来没有一个干净的解决方案，不涉及一些javascript，但你可以用一些数学方法来解决它：

function drawArrow(x1, y1, x2, y2) {
  const svg = document.getElementById("my-svg")
  
  let dx = x2 - x1;
  let dy = y2 - y1;
  const length = Math.sqrt(dx * dx + dy * dy);
  if (length > 0)
  {
      dx /= length;
      dy /= length;
  }
  const SHORTEN = 6
  const x3 = x1 + dx * (length - SHORTEN)
  const y3 = y1 + dy * (length - SHORTEN)
  
  svg.innerHTML += `<line x1=${x1} y1=${y1} x2=${x3} y2=${y3} stroke="red" stroke-width="5" marker-end="url(#arrow)"></line>`
}

您首先必须确保箭头延伸到线的末端之后，这样线的方形末端才不会显示出来。然后，您必须调整SHORTEN变量以偏移箭头的额外长度。

我的小提琴：https://jsfiddle.net/h4pgoaLw/