SVG textPath startOffset cannot be set smaller than 0% or larger than 100%

• Component: SVG
• Status: RESOLVED CONFIGURATION CHANGED

[Nadieh]

In the provided Codepen example you can find a testcase that shows two SVG texts, placed on a path with a textPath. In (my) Safari it looks as if they have a startOffset of 0%. However the first is set at -10% and the second at 110%. Chrome and Firefox show the expected offsets.


(This came up while wanting to animate in an SVG text on a path. Setting the startOffset < 0% and animating this to > 0% gave the expected results in Chrome and Firefox, but not Safari)

[Radar WebKit Bug Importer]

<rdar://problem/50112923>

[Felix Niklas]

Just stumbled upon the exact same bug in Safari.
I built this testcase: https://felixniklas.com/bug_reports/safari-negative-startoffset/ and then realized that it's already been reported.
The testcase shows the behavior with 0%, 50%, -50% and a real-world example.

[Ahmad Saleem]

I took the -50% startOffset broken Safari example from Comment 02 webpage and turned it into JSFiddle:

Link - https://jsfiddle.net/6s2dgpz8/show

All browsers (Chrome Canary 107, Firefox Nightly 106 and Safari Technology Preview 152) render it same and even Safari 15.6.1 as well.

While for real-world example:

JSFiddle Link - https://jsfiddle.net/sba96zuh/show

All browsers overlap the text while animating around box, Firefox is quite slow but it is something for Firefox to fix. But since all browsers are behaving as intended, I am going to mark this as "RESOLVED CONFIGURATION CHANGED". Thanks!