How Properly Shift Arrow Head On Cubic Bezier In Svg To Its Center

There is a cubic bezier with arrow marker:

Solution 1:

refX and refY are points in the coordinate system the marker is defined in and have no relation to the direction of the path. They simply define the point that is considered the origin of the marker and wich will be placed on the end of the path.

There is no way to define a marker along a computed path. Markers can only be placed at the vertices of a path. So the seemingly straight-forward way would be to find a mid-point, place a vertex there with appropriate cubic bezier control points...

<svgwidth="500"height="500"><defs><markerid="arrow"orient="auto"markerUnits="userSpaceOnUse"markerWidth="12"markerHeight="12"refX="3"refY="6"><pathd="M0,0 L0,12 L12,6 z"></path></marker></defs><pathmarker-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>

...but that is obviously a lot of computation, also.

Here is a hack that uses the <animateMotion> element, not to animate anything, but because it can move an object to every point along a path. The movement just starts, ends, and freezes in the middle of the path.

The "marker" does not have its own viewport, which means there is no way to define a refX/refY. The point to be placed on the path is always at (0,0) of its userspace coordinates. That is the reason the marker has to be moved in the opposite direction of these values.

<svgwidth="500"height="500" ><pathid="path1"d="M 220 104 C 220 144 400 180 400 224"fill="none"stroke-width="2"stroke="black" /><pathd="M0,0 L0,12 L12,6 z"transform="translate(-3,-6)"><animateMotiondur="0s"rotate="auto"fill="freeze"keyTimes="0;1"keyPoints="0.5;0.5"calcMode="linear" ><mpathxmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#path1"/></animateMotion></path></svg>

The hack will not work with Edge/IE, which do not implement SMIL animations.