bezier cubic curve and markers (arrow heads)

Question

I'm fairly new on svg and am tasked with doing some work on patch and bezier cubic curves.

I have an svg with N (possibly thousands) paths (bezier cubic curve's). Each line/path has a direction which is denoted by an arrow head using a marker. There's an example here;

http://jsfiddle.net/v1sw8vhd/1/

If you look at the html for that, you'll see that the markers (UpArrowPrecise and DownArrowPrecise) rotate by N degrees using orient="270" orient="90" which makes the arrow heads point more or less in the direction I need them to.

  <marker id="DownArrowPrecise"   markerWidth="10" markerHeight="20" refX="5" refY="10" orient="90" >
      <path  d="M0,20 L10,20 L5,0 Z"   />
  </marker>

For straight lines, I can see that orient="auto" on the markers works a treat. However I'm missing something for my bezier cubic curve case.

I can (and have written a javascript function that will calculate approximately the slope and thus the angle relative to the x-axis of each path/line and from there I could create a marker with the appropriate "orient" value. However this seems to be very heavyweight/overkill to me. For each line (possibly thousands) I will have to do a computation and create a marker with the appropriate "orient" value. Its doable but it seems like an awful lot of work.

For info D3 is powering all this stuff in the real app, the jsfiddle demo illustrates the problem however.

Does anybody have an idea of the best way to go about this? I'm afraid of reinventing the wheel here.

Answer 1

Draw the markers such that they go in the right direction in the first place and then use orient="auto" so the UA does it for you e.g.

<marker id="UpArrowPrecise"   markerWidth="20" markerHeight="10" refX="10" refY="5" orient="auto" >
  <path d="M20,0 L20,10 L0,5 Z"   />
</marker>

<marker id="DownArrowPrecise"   markerWidth="20" markerHeight="10" refX="10" refY="5" orient="auto" >
  <path d="M0,0 L0,10 L20,5 Z"   />
</marker>