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

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

本文介绍了如何在SVG中间创建带有箭头的弯曲路径的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

这里我试图创建四个弯曲的路径.我能够创建曲线.但是当我尝试使用标记时,它正在使用标记开始和标记结束,而标记中则不起作用,因为它是单一路径.有没有办法把箭头放在圆弧的中间

Here I'm trying to create four curved paths. I'm able to create curves. but when I try to use markers it is working with marker-start and marker-end whereas marker-mid is not working as it is single path. Is there a way we can place arrow in middle of the arc

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

推荐答案

正如您所见,没有标记类型可以做到这一点.您可以通过 javascript 自己完成.

As you've seen there's no marker type that does this. You could do it yourself via javascript.

使用 SVG DOM 确定通过 getTotalLength 的总路径长度然后使用总路径长度/2 调用 getPointAtLength 以找出中点位置.

Use the SVG DOM to determine the total path length via getTotalLength and then call getPointAtLength with the total path length / 2 to find out the mid point position.

最后在那个位置画出你想要的任何东西.如果路径发生变化,您需要更新伪标记位置.

Finally draw whatever you want at that position. If the path changes you'd need to update the pseudo marker position.

这篇关于如何在SVG中间创建带有箭头的弯曲路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-23 03:26