Search code examples
svgmarkers

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

Solution

  • 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>