SVG startOffset incorrect for <textPath> containing <tspan> or <a> (1st child aligned)

Issue #12348249 • Assigned to Francois R.

Details

Created
Jun 15, 2017
Privacy
This issue is public.
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “Scott L.”

      Changed Assigned To to “Bogdan B.”

      Changed Title from “SVG text-anchor incorrect for textPath containing tspan or &lt;a&gt; (1st child aligned)” to “SVG text-anchor incorrect for textPath containing tspan or &lt;a&gt; (1st child aligned)”

      Changed Assigned To from “Bogdan B.” to “Francois R.”

      Changed Title from “SVG text-anchor incorrect for textPath containing tspan or &lt;a&gt; (1st child aligned)” to “SVG startOffset incorrect for <textPath> containing <tspan> or <a> (1st child aligned)”

    • Doesn’t seem related to text-anchor, since removing it doesn’t change the rendering in any browser. I renamed the bug to reflect that. Other than that, I confirm this is an issue we should aim to fix.

    • Francois:

      I’m not sure why you said "doesn’t seem to be related to text-anchor". Removing it definitely changes rendering. The CodePen wasn’t set to auto-update, though, so maybe that was the problem? (I’ve changed it to auto-update now.)

      The problem is only noticeable with text-anchor: middle or text-anchor: end in LTR text. It might be different in RTL text.

      The anchor should be calculated on the entire text "chunk". Since none of the tspans have absolute positioning, the chunk is the entire text element. With middle anchoring, that text should be centered around the x or textPath startOffset point. However, within textPath, only the first child-element is being centered, and then the remaining elements are filled in to the right.

      (Sorry for the delay in replying. When I file a bug with #EdgeBug, I need to remember to click through and “Watch” the issue so I actually get updates emailed to me!)

    • PS, This issue might be related (Edge is also have text-anchor problems): https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9227501/

      Sorry that the repro case for that one is unneccessarily complicated, since it was actually a test case for a different issue, the text-anchoring problem only showed up as a side effect. Let me know if you need me to create a minimal test case for the text-anchor issue. I can’t promise that I won’t rick-roll you again, though.

    • Microsoft Edge Team

      Changed Status to “Needs root cause”

      Changed Status from “Needs root cause”

    You need to sign in to your Microsoft account to add a comment.

    Sign in