Closed Bug 752638 Opened 12 years ago Closed 1 year ago

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

Categories

(Core :: SVG, defect)

defect

Tracking

()

RESOLVED FIXED
111 Branch
Tracking Status
firefox111 --- fixed

People

(Reporter: heycam, Assigned: jwatt)

References

(Blocks 1 open bug, Regressed 1 open bug)

Details

(Keywords: dev-doc-complete)

Attachments

(3 files)

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.
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.)
Summary: make the -moz-objectFill, -moz-objectFillOpacity, -moz-objectValue, etc. properties work in marker content → make the context-fill and context-stroke SVG paint values work in marker content
Had this patch kicking around, and it seems to be most relevant to this bug.
Assignee: nobody → jwatt
Attachment #8743959 - Flags: review?(cam)
Depends on: 1094247
Attachment #8743959 - Flags: review?(cam) → review+
Keywords: leave-open
The leave-open keyword is there and there is no activity for 6 months.
:jwatt, maybe it's time to close this bug?
Flags: needinfo?(jwatt)
No, the bulk of the work for this bug still needs to be done.
Flags: needinfo?(jwatt)
Keywords: leave-open

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.

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.

Attached image test-arrow-moz.svg

SVG file demonstrate bug where arrow-head does not render

Severity: normal → S3
Duplicate of this bug: 1797950
Duplicate of this bug: 1807212
Depends on: 1808102
No longer depends on: 1094247
Pushed by longsonr@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/9a4dbcc711ed
make the context-fill and context-stroke SVG paint values work in marker content r=emilio
Keywords: dev-doc-needed
Status: NEW → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → 111 Branch

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

Regressions: 1826444
Regressions: 1881943
You need to log in before you can comment on or make changes to this bug.