Avatar for Username

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Property marker-end defined in css not rendered

  • 2 replies
  • 2 have this problem
  • 22 views
  • Last reply by longsonr

Florimond
Florimond

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

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 : <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="scene.css" ?> <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

Chosen solution

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.

Read this answer in context 👍 2

All Replies (2)

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor

Chosen Solution

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.

longsonr
longsonr

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.

Modified by longsonr