Why does the marker-start in my SVG path not show in the browser (but in the generated PNG)?

Question

Can someone please tell me, why the left arrow head in the following file shows correctly in the generated PNG, but not in the browser?

https://commons.wikimedia.org/wiki/File:SVG_double_arrow_with_marker-start_and_marker-end.svg

In Firefox it is just not there, and in Chrome I see it pointing to the bottom right instead of left.

These are the two markers:

<marker id="arrowend" viewBox="0 0 13 10" refX="2" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto">
    <path d="M 0 0  C 0 0, 3 5, 0 10   L 0 10  L 13 5" fill="red"/>
</marker>

<marker id="arrowstart" viewBox="0 0 -13 -10" refX="-2" refY="-5" markerWidth="-3.5" markerHeight="-3.5" orient="auto">
    <path d="M 0 0  C 0 0, -3 -5, 0 -10   L 0 -10  L -13 -5" fill="red"/>
</marker>

My solution based on the hint below:

<marker id="arrowstart" viewBox="0 0 13 10" refX="11" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto">
    <path d="M 13 0  C 13 0, 10 5, 13 10   L 13 10  L 0 5" fill="red"/>
</marker>

So I changed the actual path. All my attempts to just mirror it failed, so for me this was the best solution.

This is where I put it in action, BTW: https://commons.wikimedia.org/wiki/Category:Full_octahedral_group;_single_elements;_signed_perm_mat,_perm_mat_and_cube

Answer 1

A viewBox with negative width and height is invalid. The contents of invalid viewBoxes do not render.

If Chrome renders arrowstart in any way, that's a Chrome bug. Whatever png generator you're using is clearly also buggy.

Here's one way to get the arrows on both ends, at least on browsers that support orient="auto-start-reverse"

<svg  width="500" height="300" viewBox="0 0 200 50">
    <defs>
        <marker id="arrow" viewBox="0 0 13 10" refX="2" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto-start-reverse">
            <path d="M 0 0  C 0 0, 3 5, 0 10   L 0 10  L 13 5" fill="red"/>
        </marker>
    </defs>

    <line x1="25" y1="25" x2="175" y2="25" stroke="red" stroke-width="5" marker-start="url(#arrow)" marker-end="url(#arrow)"/>

</svg>