752638 - make the context-fill and context-stroke SVG paint values work in marker content

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Cameron McCormack (:heycam)]

The new values -moz-objectFill, -moz-objectFillOpacity, -moz-objectValue, etc. that were introduced in bug 719286 are ideal for use in markers, so we should make them compute to the referenced values from the element using the marker.

Comment 1

[Cameron McCormack (:heycam)]

These got renamed and added to SVG 2.  (-moz-objectFillOpacity and -moz-objectValue got renamed to context-fill-opacity and context-value, but aren't in SVG 2 and are probably less important.)

Comment 2

[Jonathan Watt [:jwatt]]

Attachment: part 1 - Move SVGTextFrame::SetupContextPaint to nsSVGUtils

Had this patch kicking around, and it seems to be most relevant to this bug.

Comment 3

[Pulsebot]

https://hg.mozilla.org/integration/mozilla-inbound/rev/a2bf3ca6cc2a

Comment 4

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/a2bf3ca6cc2a

Comment 5

[Release mgmt bot [:suhaib / :marco/ :calixte]]

The leave-open keyword is there and there is no activity for 6 months.
:jwatt, maybe it's time to close this bug?

Comment 6

[Jonathan Watt [:jwatt]]

No, the bulk of the work for this bug still needs to be done.

Comment 8

[Ana Tudor]

This would be really useful in a number of situations.

For example, same shape arrows for different stroke lines, as seen here https://codepen.io/thebabydino/full/PoEXRNe/cbd84b0cb0fce6ef950c303e70ac8849 (when hovering the components either in the code or on the SVG), where I resorted to simply integrating the end arrows into the paths because creating a marker for each would have been too much trouble. And this is the very simple case where the lines with arrow ends are either horizontal or vertical.
Things get more complicated when the line isn't horizontal or vertical because then I need to compute its angle in order to get the relative coordinates of the other two vertices of the arrow triangle. It is just a bit of trigonometry and it can be automated, but it would be nice if I didn't have to do this and I could use just one marker for all the lines, the fill always being the stroke of the current one.

I've also found that markers can be used to round only one end of a line (as opposed to stroke-linecap: round, which rounds both ends) https://codepen.io/thebabydino/pen/GRRQmLv - here it would also be really useful if the marker's fill could be set to be the same as the line's stroke.

Comment 9

[Nick Parlante]

I know this bug looks kind of ancient, but I would argue that this old issue is
just now becoming kind of prominent, as SVG grows more common for web art vs.
the old technique of embedding PNGs.

And predictably for my workflow as a teacher, this case some up constantly,
as art usually has some arrows in it.

The precipitating issue is that in the latest Inkscape (1.2), making a line with arrow, with everything at
its default produces a line-arrow that seemingly hits this bug - arrow head does not render
in Firefox but works in Chrome and Safari.

I'll include the inkscape-made test-arrow-moz.svg example file
which is just a horizontal line with one triangular arrow head.

Result: In Firefox, rendering this SVG we get the line but the arrow head is blank.
Expected: render the line and arrow head (works in Chrome and Safari on my Mac OS machine)

I tried the "export as 1.1", but no matter what I did, Inkscape
produced arrows where the marker did not work in Firefox.

Looking in the XML, there's this for the marker..

<marker
   style="overflow:visible"
   id="TriangleStart"
   refX="0"
   refY="0"
   orient="auto-start-reverse"
   inkscape:stockid="TriangleStart"
   markerWidth="5.3244081"
   markerHeight="6.155385"
   viewBox="0 0 5.3244081 6.1553851"
   inkscape:isstock="true"
   inkscape:collect="always"
   preserveAspectRatio="xMidYMid">
  <path
     transform="scale(0.5)"
     style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
     d="M 5.77,0 -2.88,5 V -5 Z"
     id="path135" />
</marker>

And sure enough, the "context-stroke" mentioned in the bug title is in the style there.
And context-stroke is in the official spec:
https://www.w3.org/TR/SVG2/painting.html#SpecifyingPaint

The point is .. I'm afraid this is no longer an obscure case.
Inkcape and Illustrator must be the top 2 apps for authoring
SVG, and Inkscape at least is emitting this tag for every arrow.

Sort of workaround mentioned on other bug: edit the SVG text, changing "context-stroke" to "#000"
and the arrow head will draw in black in Firefox.

Comment 10

[Nick Parlante]

Attachment: test-arrow-moz.svg

SVG file demonstrate bug where arrow-head does not render

Comment 13

[Robert Longson [:longsonr]]

Attachment: Bug 752638 - make the context-fill and context-stroke SVG paint values work in marker content r=emilio

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9a4dbcc711ed
make the context-fill and context-stroke SVG paint values work in marker content r=emilio

Comment 15

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/9a4dbcc711ed

Comment 16

[Brian Thomas Smith [bsmth]]

Documentation changes for this can be tracked in the following GitHub issue: https://github.com/mdn/content/issues/24399