SVG markers rendering viewbox

I am trying to get a marker to render in SVG - it should be a open arrow facing into the line. The marker is cutoff (possibly because the path is centred on the x-axis). how do i extend the 开发者_如何学编程marker view area so that the whole marker shows?

The test SVG file is: http://www.robmunro.net/misc/arrows.svg

The correct output should be: http://www.robmunro.net/misc/arrows.png

You can set overflow:visible on the marker element, by default it clips to the bounds of the marker tile. Then make the necessary adjustments to the marker to get the alignment you want etc. For your reference it may help to make a semi-transparent rectangle that covers the full bounds of the marker tile so that you can clearly see when you are outside it.

The coordinates of your marker are (15,-15), (0,15), (-15,-15), but only the marker is only drawn in the box (0,0) to (markerWidth, markerHeight). You can see your marker if you redraw it such that it has only positive values (with a bit of a border):

<path d="M5,5 L20,20 5,35" />

And make sure the marker size is big enough:

markerWidth="25" markerHeight="40"

Then you can make sure it sits on the line by using the refX and reY attributes:

refX="20" refY="20"

All together it should be:

<marker id="stip_1163554992"  markerUnits="strokeWidth" orient="auto" refX="20" refY="20" markerWidth="25" markerHeight="40"  style="stroke:#ffff00;stroke-width:5.0px;stroke-opacity:1.0;stroke-linecap:round;stroke-linejoin:round;fill:none;">
  <path d="M5,5 L20,20 5,35" />
</marker>

You can set a viewBox attribute on the marker with a negative origin point. This allows you avoid adjusting the coordinates of the marker shape(s) itself. The refX and refY point need to be shifted since they are relative to the upper left corner of the viewBox.