使用SVG的块箭头

我需要使用SVG从一个点

（x0，y0）

到另一个点

（x1，y1）

，像图上的一样，绘制漂亮的笔划块箭头

我能想象的唯一方法是使用一条线（两条线基本上用来模拟笔划和填充）和标记，但由于笔划重叠，它看起来有点难看

理想情况下，线条和标记都应该用相同的颜色填充，并且应该具有相同的笔划颜色，并且整个箭头宽度可以固定（但是如果我也可以将其参数化，那就太酷了）。基本上，它应该看起来与提供的图片相同，并且应该能够通过提供两点的坐标来绘制。

---

有可能吗？

我很无聊，给你。我已经编写了一个函数来生成正确形状的路径

您只需要给它“from”和“to”坐标、线宽、箭头宽度和箭头长度

享受吧

var-from={x:50，y:250}；
var-to={x:250，y:100}；
var线宽=30；
var arrowheadWidth=60；
var箭头头长=50；
var svg=document.getElementById（“测试”）；
drawArrow（svg、从、到、线宽、箭头宽度、箭头长度）；
函数drawArrow（svg、from、to、线宽、箭头宽度、箭头长度）
{
var dx=to.x-from.x；
var dy=to.y-from.y；
//计算线的长度
var len=Math.sqrt（dx*dx+dy*dy）；
如果（长度<箭头头长）返回；
//线条宽度和箭头宽度之间的差异
var dW=箭头宽度-线宽；
//线的角度
变量角度=数学atan2（dy，dx）*180/数学PI；
//生成描述箭头的路径。为简单起见，我们将其定义为
//长度合适的水平线，从0,0开始。然后旋转
//并使用变换属性将其移动到位。
变量d=['M'，0，-线宽/2，
“h”，len-箭头头长，
‘v’，-dW/2，
L，len，0，
“L”，长度-箭头头长，箭头头宽/2，
‘v’，-dW/2，
'H'，0，
‘Z’]；
var path=document.createElements（“http://www.w3.org/2000/svg“，”路径“）；
setAttribute（“d”，d.join（“”））；
setAttribute（“变换”、“平移”（+from.x+）、“+from.y+”）旋转（+angle+”）；
setAttribute（“类”、“箭头线”）；
appendChild（路径）；
}

。箭头行{
填充物：黄金；
笔画：黑色；
笔画宽度：6；
}

---

最简单的方法是使用脚本创建箭头。 在这里，我只需从两点p1和p2确定箭头的长度和角度，然后以正确的长度创建一条简单路径，并按计算出的角度旋转它：

svgns=”http://www.w3.org/2000/svg"
功能箭头（p1、p2）{
var h1=15//线厚度
var h2=35//箭头高度
var w2=22//箭头宽度
var deg=数学atan2（p1.y-p2.y，p1.x-p2.x）*（180/数学PI）；
var len=Math.sqrt（Math.pow（p1.y-p2.y，2）+Math.pow（p1.x-p2.x，2））
var arr=document.createElements（svgns，“路径”）
var d=`M${p1.x}${p1.y-h1/2}v${h1}h${h2/2-len}v${（h2-h1）/2}l${-w2}${-h2/2}l${-w2}${-h2/2}v${（h2-h1）/2}z`
arr.setAttribute（“d”，d）
arr.setAttribute（“transform”，`rotate（${deg}${p1.x}${p1.y}）`）
arr.classList.add（“箭头”）
返回arr
}
var a1=箭头（{x:50，y:50}，{x:200，y:200}）
var a2=箭头（{x:450，y:50}，{x:300，y:200}）
var a3=箭头（{x:450，y:450}，{x:300，y:300}）
var a4=箭头（{x:50，y:450}，{x:200，y:300}）
svg.appendChild（a1）
svg.appendChild（a2）
svg.appendChild（a3）
svg.appendChild（a4）

.arrow{笔划宽度：3px}
.arrow:n类型（1）{填充：绿色；笔划：石灰}
.箭头：第n个类型（2）{填充：红色；笔划：橙色}
.箭头：第n种类型（3）{填充：蓝色；笔划：绿松石}
.箭头：第n种类型（4）{填充：紫色；笔划：粉红色}

---

在坐了几个小时检查我所有的数学题后：
在SVG defs标记中创建了一个规范化箭头
然后在提供的坐标后缩放箭头。 （添加了静态高度XD）

document.addEventListener（“DOMContentLoaded”），函数（事件）{
var svgDoc=document.getElementById（“arrowSvg”）；
var useArrow=svgDoc.getElementById（“customArrow”）；
var extraData=useArrow.getAttribute（“额外：数据”）；
extraData=extraData.split（“”）；
var x1=parseInt（外部数据[0]）；
var x2=parseInt（外部数据[1]）；
变量y1=parseInt（外部数据[2]）；
var y2=parseInt（extraData[3]）；
高度=15；
//计算所需的旋转角度
var deltaY=y1-y2；
增值税=x2-x1；
var角度=数学atan2（deltaY，deltaX）*（180/数学PI）；
//两点之间的距离。
var距离=数学sqrt（数学功率（x2-x1，2）+数学功率（y2-y1，2））；
useArrow.setAttribute（“转换”，
翻译（“+（x1+（deltaX/2））+”+“（y1-（deltaY/2））+”）+
旋转（“+-1*角度+”）+
“矩阵（“+距离+”，0，0，“+箭头高度+”，“+（0.5-距离*0.5）+”，“+（0.5-箭头高度*0.5）+”）；
});
svg{
宽度：50%；
边框：1px纯黑；
}
.阿罗{
笔画：黑色；
笔画宽度：0.05；
填充物：黄色；
}
>
我想您可以将整个东西创建为一个符号，其中包含一条路径，即整个箭头。您可以使用标记和变换将该符号放置在您想要的任何位置。我们有相同的想法，但您可以将其放置在更快的位置；-）