SVG marker-end attribute

shepardtone commented 6 years ago

Any plans to add support for the marker-end attribute? It is commonly used to render an arrowhead at the end of a path, as in this example.

exupero commented 6 years ago

Are you experiencing problems with the marker-end attribute? I added your linked example to the test page and the arrowhead appears in the saved PNG without any difficulty.

tombiscan commented 5 years ago

I've just encountered an issue with the marker-end. Here is how to reproduce:

Some libraries, including Dagre D3 will prefix the marker URL with location.href. In that case, the arrowhead is not rendered.

The example from the test page:

<svg width="200" height="200">
  <defs>
    <marker id="head" orient="auto" markerWidth="2" markerHeight="4" refX="0.1" refY="2">
      <path d="M0,0 V4 L2,2 Z" fill="red"></path>
    </marker>
  </defs>
  <g transform="translate(50,50)">
    <path id="arrow-line" marker-end="url(http://exupero.org/saveSvgAsPng/#head)" stroke-width="5" fill="none" stroke="black" d="M0,0 C45,45 45,-45 90,0"></path>
  </g>
</svg>

Note the http://exupero.org/saveSvgAsPng/#head instead of #head for the marker-end attribute.

Screenshot 2019-06-26 at 14 22 20

exupero / saveSvgAsPng

SVG marker-end attribute #194