make the context-fill and context-stroke SVG paint values work in marker content
Categories
(Core :: SVG, defect)
Tracking
()
Tracking | Status | |
---|---|---|
firefox111 | --- | fixed |
People
(Reporter: heycam, Assigned: jwatt)
References
(Blocks 1 open bug)
Details
(Keywords: dev-doc-complete)
Attachments
(3 files)
Reporter | ||
Comment 1•9 years ago
|
||
Updated•9 years ago
|
Assignee | ||
Comment 2•9 years ago
|
||
Reporter | ||
Updated•9 years ago
|
Assignee | ||
Updated•9 years ago
|
Comment 4•9 years ago
|
||
bugherder |
Comment 5•6 years ago
|
||
Assignee | ||
Comment 6•6 years ago
|
||
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•2 years ago
|
||
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•2 years ago
|
||
SVG file demonstrate bug where arrow-head does not render
Updated•2 years ago
|
Comment 13•2 years ago
|
||
Updated•2 years ago
|
Comment 14•2 years ago
|
||
Comment 15•2 years ago
|
||
bugherder |
Comment 16•2 years ago
|
||
Documentation changes for this can be tracked in the following GitHub issue: https://github.com/mdn/content/issues/24399
Updated•2 years ago
|
Description
•