mdn / mdn/browser-compat-data

'rotate' attribute of the svg text element not implemented when used in combination with svg textpath element in some browsers

Open
#18,510 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

browser:safari_ios data:svg
Dominant language
JSON
Stars
5.8k
Forks
2.6k
Avg merge
1d 21h
Merged PRs (30d)
186

Description

What type of issue is this?

Browser bug (a bug with a feature that may impact site compatibility)

What information was incorrect, unhelpful, or incomplete?

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text reports that the 'rotate' attribute of the 'text' element is fully supported by Chrome and Safari on IOS, but these browsers do not rotate text when combined with a 'textpath' element, whereas Chrome and Edge on Windows do perform the expected rotation. For the IOS browsers, even adding an additional 'tspan' element with rotation inside the 'textpath' element does not have the expected effect.

What browsers does this problem apply to, if applicable?

Chromium (Chrome, Edge 79+, Opera, Samsung Internet), Safari

What did you expect to see?

I expected that Chrome and Safari on IOS would rotate the characters of the text, as described by the SVG standard and exhibited by Chrome and Edge on Windows.

Did you test this? If so, how?

https://jsfiddle.net/k238fLus/1/

The above JSfiddle yields different output between the browsers in question at this time.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath (the JSfiddle example is adapted from the example given on this page)

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

MDN metadata
MDN page report details
  • Query: svg.elements.text
  • Report started: 2023-01-02T21:00:46.436Z

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the JSFiddle example across the browsers described, then compare the results with the SVG text, tspan, and textPath pages linked in the report. Determine whether the compatibility claim for svg.elements.text is incorrect and document the verified browser behavior in the relevant compatibility data.

Written by the indexing model from the issue text.

Assessment

Domain
documentation
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.