587490 - SVG markers cannot be applied using external stylesheets.

Status: RESOLVED DUPLICATE of bug 309612

(Core :: SVG, defect)

Description

[Mike Hemesath]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.126 Safari/533.4
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b4pre) Gecko/20100815 Minefield/4.0b4pre

If a marker is added to an SVG document's defs element, it can only be applied to a path using internal stylesheets, inline styles, or setting the marker attribute directly on the path element.  Applying a marker to a path will not work if that style is defined in an external stylesheet.

Reproducible: Always

Steps to Reproduce:
1. Create an SVG document with a path node and a defined marker
2. Create a reference in the SVG document to an external stylesheet.
3. Apply the marker to the path from within the external stylesheet. e.g. path { marker-end: url(#triangle); }
Actual Results:  
The path will be rendered without the marker being applied.

Expected Results:  
The path will be rendered with the marker applied.

This issue may be present in all style declarations that use the url function in an external stylesheet. e.g. Would the issue manifest itself if the fill style were defined in an external stylesheet instead of the style attribute?


<rect x="20" y="190" width="200" height="50" style="fill: url(#skewed-gradient); stroke: black;"/>

Comment 1

[Daniel Holbert [:dholbert]]

It sounds like you've got a testcase that demonstrates this -- would you mind attaching it?  (First, attach the stylesheet on this bug, and then update your SVG document to reference the attachment's URL[1] for its external stylesheet, and then attach the SVG document.)

[1] e.g. https://bug587490.bugzilla.mozilla.org/attachment.cgi?id=NNNNNNN

Comment 2

[Mike Hemesath]

The bug URL will point to a demo that exposes the bug: http://www.mikehemesath.com/svg_markers/demo/marker.svg

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase 1

Ah, thanks - I'd missed that.

Here's a reduced testcase, using an embedded data URI for the external stylesheet.

The teal-colored path is the one that uses the external stylesheet. (teal-coloring is to verify that the stylesheet is being applied)

mozilla-central trunk and Opera 10.61 both lack the marker on the teal path, while Midori 0.2.4 (webkit) applies the marker.

Comment 4

[Daniel Holbert [:dholbert]]

FWIW, this bug's URL (in comment 2) also triggers a crash on tab-close in very recent trunk builds.  Filed bug 587494 on that crash, with what I think should be a fix.

Comment 5

[Robert Longson [:longsonr]]

This is invalid. The stylesheet contains a relative URL i.e. #m4. This expands to http://www.mikehemesath.com/svg_markers/demo/styles#m4 which points to nothing so you get no marker.

This has come up before. The bug I'm connecting it to has further details.

Comment 6

[Mike Hemesath]

For me it was more intuitive that the hash would behave more like a CSS id selector than a relative url hash, even though it is inside a url function.

At first I was concerned about inline SVG in the HTML generated by JavaScript as I don't think there is a way to actually reference that from a stylesheet.  However, this does make sense and forces a better approach to using markers. If the markers are purely presentational, its logical that their definition is not present in the main SVG document, but rather a separate, reusable file such as markers.svg.  I'm fairly new to SVG, but this makes me wonder if its not a good practice to put most of the reusable elements in the <defs></defs> section in a separate reusable SVG document.

Changing the entry in style.css to: .p4 { marker-end: url(marker.svg#m4); } does indeed fix the problem in both opera and firefox.  Thanks for the help and the quick responses all around!

Comment 7

[Daniel Holbert [:dholbert]]

(In reply to comment #3)
> mozilla-central trunk and Opera 10.61 both lack the marker on the teal path,
> while Midori 0.2.4 (webkit) applies the marker.

I filed https://bugs.webkit.org/show_bug.cgi?id=44047 on WebKit's mistaken application of the marker.

Comment 8

[Mike Hemesath]

I externalized the markers into their own SVG file and that seemed to expose a new issue.  If an external stylesheet is applying the markers onto a path using a separate SVG document for the markers, the markers cannot be styled using that exernal stylesheet in firefox. Every browser seems to behave different:

Opera - Applies the marker and styles the marker with a green fill
Firefox -Applies the marker but will not style it
Webkit - Doesn't apply the marker

Here is a URL demonstrating this issue: http://www.mikehemesath.com/svg_markers/demo2/arrow.svg

I know this should be filed under a separate bug, but I was hoping for some assistance in determining which browsers have bad implementations. I think the desired behavior is defined here: http://www.w3.org/TR/SVG/painting.html#MarkerProperty

Comment 9

[Robert Longson [:longsonr]]

If you add
<?xml-stylesheet href="styles.css" type="text/css"?>
to the marker.svg file firefox will style the marker. I don't know if this is per spec or not as its really a css question rather than an SVG question.

Comment 10

[Mike Hemesath]

The whole point of externalizing the markers into their own file is to make them reusable. Referencing the stylesheet in marker.svg is not practical. The more the marker.svg file is referenced in external stylesheets, the more external stylesheets it will need to include itself. This is a bad circular dependency.

If the marker cannot be styled with CSS, then applying markers in the external CSS is useless for SVG that is generated by js & appended to a HTML DOM. This would be a shame, as this level of reusability and abstraction of presentation from structure would be a great benefit to SVG.

I will log this behavior as a bug to the CSS.

Comment 11

[Robert Longson [:longsonr]]

Do feel free to cc me on the new bug you create.