Question

I want to create a arrowhead in middle of curved path using SVG. Can someone please help me. below is the sample code of SVG

我试图创建四条弯曲路径。我能够创建曲线。但是当我尝试使用标记时，它正在使用marker-start和marker-end，而marker-mid不能正常工作，因为它是单一路径。有没有办法可以在箭头中间放置箭头

`<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<?xml version="1.0" standalone="no"?>
<?xml version="1.0"?>
<?xml version="1.0" standalone="no"?>
<svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           " stroke="green" fill="none" />
    <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           " stroke="red" fill="none"/>
    <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           " stroke="purple" fill="none"/>
    <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           " stroke="blue" fill="none"/>
</svg>
</body>
</html>`

Answer 1

正如您所见，没有标记类型可以做到这一点。你可以通过javascript自己做。

使用SVG DOM确定the total path length via getTotalLength，然后使用总路径长度/ 2调用getPointAtLength以找出中点位置。

最后在那个位置画出你想要的东西。如果路径发生变化，则需要更新伪标记位置。

如何在SVG中间创建带箭头的曲线路径

1 个答案: