You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Browsers display this correctly, ‘ABC’ and ‘DEF’ are at the start of their respective paths. The issue is that the SVG Text Algorithm calculates the positions on path wrong. Here’s why:
CSS layout is applied: Lets assume that the result is that ‘ABC’ starts at x coordinate 0, ‘DEF’ starts at x coordinate 40.
The text algorithm (step 8, position on path) uses x coordinate 0 to position ‘ABC’ on path P1, which is approximately at path length 0, which is correct.
The text algorithm uses x coordinate 40 to position ‘DEF’ on path P2, which is approximately at path length 40, which is incorrect. The text should start approximately at path length 0.
I'm using the term 'approximately' here, because the glyph advance also affects the text position on path. But that isn't relevant to this issue.
The algorithm should be modified to work correctly with multiple textPaths to reflect the current browser behaviour, or have a note saying that this is a breaking change.
The text was updated successfully, but these errors were encountered:
The SVG Text Layout Algorithm doesn’t work correctly if
<text>
has multiple<textPath>
elements. Here’s an example: https://jsfiddle.net/x8eug31n/Browsers display this correctly, ‘ABC’ and ‘DEF’ are at the start of their respective paths. The issue is that the SVG Text Algorithm calculates the positions on path wrong. Here’s why:
I'm using the term 'approximately' here, because the glyph advance also affects the text position on path. But that isn't relevant to this issue.
The algorithm should be modified to work correctly with multiple textPaths to reflect the current browser behaviour, or have a note saying that this is a breaking change.
The text was updated successfully, but these errors were encountered: