Property marker-end defined in css not rendered
Hello,
The marker-end set in scene.css : svg line.arrow {
stroke: #888888; stroke-width:1px; marker-end: url(#markerArrow); }
is not rendered in Firefox when browsing : <svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="800"
height="200"
viewBox="0 0 800 200">
<defs>
<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" stroke="#888888" fill="#888888" />
</marker>
</defs>
<line x1="350" y1="160" x2="430" y2="160" class="arrow" />
</svg>
Other browsers (Edge, Chrome and Brave) do support this. Adding marker-end="url(#markerArrow)" to <line> is OK - as far as it is removed from scene.css anymore.
Is it a bug ? Regards, Florimond
Gekozen oplossing
The property is documented on MDN, without any indication of Firefox having a problem with it: https://developer.mozilla.org/docs/Web/SVG/Attribute/marker-end
When I create a test "fiddle" I do get an arrow end:
https://jsfiddle.net/ktdqf2c0/ (screenshot attached)
That generated frame contains an HTML5 page, not an XML document, so that could be a difference from your application.
Dit antwoord in context lezen 👍 2Alle antwoorden (2)
Gekozen oplossing
The property is documented on MDN, without any indication of Firefox having a problem with it: https://developer.mozilla.org/docs/Web/SVG/Attribute/marker-end
When I create a test "fiddle" I do get an arrow end:
https://jsfiddle.net/ktdqf2c0/ (screenshot attached)
That generated frame contains an HTML5 page, not an XML document, so that could be a difference from your application.
In the past if you wrote
line.arrow {
stroke: #888888; stroke-width:1px; marker-end: url(#markerArrow);
}
In a CSS file (scene.css), that was supposed to be short for
line.arrow {
stroke: #888888; stroke-width:1px; marker-end: url(scene.css#markerArrow);
}
But you've no element with an id of markerArrow in scene.css (that's in your html file) so marker-end is non-functional.
Since many people including yourself found this confusing, the relevant specifications were changed. Firefox changed too and will soon match the markerArrow from the html file instead.
I'm not sure whether that change is in 51 or 52 but you should get it fairly soon in either case.
The chosen answer's test fiddle has everything in the same file and so does not suffer from your issue.
Bewerkt door longsonr op