Setting the "vector-effect" attribute in the SVG <text> tag to "non-scaling-stroke" has no effect

• Component: SVG
• Status: RESOLVED FIXED

[Said Abou-Hallawa]

Open the following svg in WebKit:

<svg xmlns="http://www.w3.org/2000/svg">
  <g id="g" style="font: 16px sans-serif; text-rendering: geometricPrecision" transform="scale(2)">
    <text x="50" y="50" stroke="blue" stroke-width="3">hello there</text>
  </g>
  <g id="g" style="font: 16px sans-serif; text-rendering: geometricPrecision" transform="translate(0, 100) scale(2)">
    <text x="50" y="50" stroke="blue" stroke-width="3" vector-effect="non-scaling-stroke">hello there</text>
  </g>
  <g id="g" style="font: 32px sans-serif; text-rendering: geometricPrecision" transform="translate(0, 200)">
    <text x="100" y="100" stroke="blue" stroke-width="3" >hello there</text>
  </g>
</svg>

Result: The stroke of the text in the first and the second lines are scaled up.
Expected: 
- Only the first line should have the stroke width scaled up. 
- The second line is scaled using transform="translate(0, 100) scale(2)" but the attribute vector-effect="non-scaling-stroke" is added to the <text> tag. So the stroke width should not scale up.
- The third line is scaled manually: the font size (in the <g> tag), the x and the y (in the <text> tag) are doubled.

[Said Abou-Hallawa]

Created attachment 242674 [details]
Safari-Rendering

[Said Abou-Hallawa]

Created attachment 242675 [details]
FireFox-Rendering

[Radar WebKit Bug Importer]

<rdar://problem/19163695>

[Brad Bice]

This is still happening in Safari Version 12.1 (14607.1.40.1.4).

CSS rules applied to SVG or SVG element children also have no effect.

[Julius Tarng]

Still experiencing this bug in latest Safari. Any known workarounds or updates on status?

[Yehonatan Daniv]

Still experiencing this today: https://twitter.com/bigel/status/1564977943872520197?s=20&t=SVNrk_3Vvggd42pDvMNblg

[Tom Bigelajzen]

FYI This was fixed in Chromium on 2015
https://bugs.chromium.org/p/chromium/issues/detail?id=475203

[Nikolas Zimmermann]

I have been working on a fix on this. While testing I found out another Chrome/Blink specific issue: 'text-rendering: geometricPrecision' breaks 'vector-effect: non-scaling-stroke' for text.

Since recently our text-rendering handling for geometricPrecision was aligned with Chrome/Blink we're plagued by the same issue, breaking 'vector-effect: non-scaling-stroke'.

Here's a breakdown of the problem/issue:

RenderSVGInlineText chooses a FontDescription with a size "close" to the final on-screen size (mapping the <text> object through all ancestor-defined transformations until either a composited ancestor or the root RenderView is reached).

When painting with such a "scaled font", one needs to scale e.g. the used stroke-width by the scale factor used to select the "scaled font". To implement support for non-scaling stroke, one can simply omit the scaling factor (that was missing so far in WebKit, and is implemented like this in Blink).

However when text-rendering: geometricPrecision is used, we do NOT select a "scaled font", but instead use the font-size as specified in the document, and rely on scaling the CTM prior to rendering with that font. Therefore the reported scalingFactor is 1 - omitting a scale factor of 1 or applying it has the same result - therefore non-scaling-stroke is broken, when implemented this way.

Trying the following in Chrome and Firefox:

<svg xmlns="http://www.w3.org/2000/svg">
  <g id="g" style="font: 16px sans-serif; text-rendering: geometricPrecision" transform="translate(0, 100) scale(2)">
    <text x="50" y="50" stroke="blue" stroke-width="3" vector-effect="non-scaling-stroke">hello there</text>
  </g>
</svg>

(line 2 from Saids test case)

--> works in Gecko, broken in Blink, and broken in WebKit (when implementing this as in Chromium/Blink).

The full fix needs to handle non-scaling-stroke for the two text-rendering modes: geometricPrecision vs. default text-rendering mode, support for various device scale factors, support for legacy engine and LBSE. PR will follow.

[Nikolas Zimmermann]

Pull request: https://github.com/WebKit/WebKit/pull/14977

[Nikolas Zimmermann]

When webkit.org/b/258120 lands, the PR associated with this ticket implements support for non-scaling-stroke for both the legacy SVG engine & LBSE in one shot.

[EWS]

Committed 265204@main (7eeb61cf4db4): <https://commits.webkit.org/265204@main>

Reviewed commits have been landed. Closing PR #14977 and removing active labels.