如何正确地将SVG中的立方贝塞尔上的箭头移动到其中心
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何正确地将SVG中的立方贝塞尔上的箭头移动到其中心相关的知识，希望对你有一定的参考价值。
有一个带箭头标记的立方贝塞尔：
<defs>
<marker id="arrow" orient="auto" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" refX="10" refY="6">
<path d="M0,0 L0,12 L12,6 z"></path>
</marker>
</defs>
<path marker-end="url(#arrow)" d="M 220 104 C 220 144 400 184 400 224" stroke-width="2"></path>
我想将箭头移动到曲线的中心，但是当我改变refX的marker attr时，箭头不会越过曲线而是直接向顶部移动（http://prntscr.com/ikzuol）。它与二次贝塞尔曲线完美匹配，但不适用于立方体。
有没有办法使用标记在正方形贝塞尔曲线的中心显示箭头？
我知道有一个选项可以获得长度坐标，计算旋转角度并自己进行定位和旋转，但我想避免这样的计算。
UPD：我已经创建了一个codepen来演示这个问题：https://codepen.io/onatolich/pen/LQqYvr
UPD2：再用一个代码来证明它正在使用二次贝塞尔曲线：https://codepen.io/onatolich/pen/NyoxQv
答案
refX和refY是标记定义的坐标系中的点，与路径的方向无关。它们只是定义了被认为是标记原点的点，它将被放置在路径的末尾。
无法沿计算路径定义标记。标记只能放在路径的顶点。所以看似直截了当的方法是找到一个中点，在那里放置一个带有适当的三次贝塞尔控制点的顶点......
<svg width="500" height="500">
<defs>
<marker id="arrow" orient="auto" markerUnits="userSpaceOnUse"
markerWidth="12" markerHeight="12" refX="3" refY="6">
<path d="M0,0 L0,12 L12,6 z"></path>
</marker>
</defs>
<path marker-mid="url(#arrow)"
d="M 220,104 C 220,124 265,143 310,162.5 355,182 400,202 400,224"
stroke-width="2" stroke="black" fill="transparent"></path>
</svg>以上是关于如何正确地将SVG中的立方贝塞尔上的箭头移动到其中心的主要内容，如果未能解决你的问题，请参考以下文章