0

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

我尝试更改 refX 以使标记在最后完成，但由于线条很粗，它会在标记之后显示线条的其余部分。我可以以一种我看不到该行的其余部分但我想在 svg 的范围内看到整个标记的方式来减少这个 refX 的更改。

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

这条线是动态渲染的，这意味着它不会总是这样。在从 (0,0) 到 (100,100) 的 svg(x,y) 中，它可以从 (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>

4

2 回答 2

0

对于这个问题似乎没有不涉及一些 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/

于 2021-06-18T02:40:55.477 回答
0

您可以在此处使用 codepen 在线编辑它。我修改了宽度和高度。

<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>

于 2019-08-13T17:38:41.677 回答