SVG Text Layout Algorithm and multiple textPaths

[karip]

The SVG Text Layout Algorithm doesn’t work correctly if <text> has multiple <textPath> elements. Here’s an example: https://jsfiddle.net/x8eug31n/

    <text>
        <textPath href="#P1">ABC</textPath>
        <textPath href="#P2">DEF</textPath>
    </text>

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:

1. CSS layout is applied: Lets assume that the result is that ‘ABC’ starts at x coordinate 0, ‘DEF’ starts at x coordinate 40.
2. 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.
3. 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.

[Tavmjong]

I agree, the algorithm should be fixed to work according to current browser behavior.

[boggydigital]

Not blocking updated 2.0 CR publication - assigning 2.1 WD milestone

[tkent-google]

I encountered this issue recently. My workaround is to assume <textPath> has x="0" y="0" by default.