上下文
我想要得到我正在创建的图形中的节点路径上的箭头。因为我使用的是贝塞尔曲线,所以分别使用路径结束点/开始点的中心点更容易。SVG:如何修正Bezier弯曲路径的偏心标记?
在所附的jsfiddle(下文),我们看到点,其中之一为二次贝塞尔曲线的控制点的一个简单的三角形。此外,端点标记已被抵消以与节点接触,而不是部分地位于其后面;这是由于路径被绘制到点的中心而不是边缘。
美学有几件事情不太同意此图右:
箭头头尖比路径
thiner虽然尖端正确角度的箭头上贝塞尔曲线,路径不在箭头出现的位置。
这些美学缺陷的发生是因为:
箭头头部的点是明显thiner比路径/路径通过节点
箭头头部延伸是如此之大在相对于所述路径的曲率,没有令人满意的解决方案,将箭头头部问题(给定当前代码)
现在,人们可以通过制造紧张三次Bezier曲线作为的jsfiddle的第二SVG做陪审团钻机的第二个问题。
然而,在第三SVG看到,这不符合极端曲率擦出火花。
问题
有没有用简单的方式,以确保箭头的点和路径的位置的角度时,箭头连接被居中;或者只是简单地将箭头缩小到足够小而不会注意到的地方?
有没有一种方法,使起始箭头到最后看不见的路径? /或者一个简单的方法来获得路径在击中节点之前结束?
# code to meet SO requirements
# look at this code
如何进行视图框的工作。它适用于第一个,但另一个不太好。有没有办法让标记最后呈现(这样我可以将图像分层为路径,节点,标记)? – SumNeuron
SVG元素总是堆叠/呈现与创建时相同。即如果您想要上方的路径/箭头,则应先创建您的圈子。 –
其中一个主要问题是我正在使用'circle'的中心来制作'path's,然后将'circle'放在''path's之上以掩盖'path's。我这样做是因为在我的应用程序中,我可能不一定知道'path'可能来自哪个方向,所以在'circle'不重要之前就搞清楚如何结束'path'。我可以通过向'refX'属性添加半径来将'marker'移回''path'',但是'path'比tip更宽。有没有办法解决这个问题? – SumNeuron