'rotate' attribute of the svg text element not implemented when used in combination with svg textpath element in some browsers
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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