Steps to reproduce
I’ve made a small example to demonstrate how Edge is the only browser implementing the SVG spec correctly, regarding calculating the glyph position relative to the glyph-midline.
The SVG 1.1 and 2.0 specification says:
Position the glyph such that the glyph-midline passes through the midpoint-on-the-path and is perpendicular to the line through the startpoint-on-the-path and the endpoint-on-the-path.
And a note after the list:
In the calculations above, if either the startpoint-on-the-path or the endpoint-on-the-path is off the end of the path, then extend the path beyond its end points with a straight line that is parallel to the tangent at the path at its end point so that the midpoint-on-the-path can still be calculated.
This issue is tracked in https://github.com/w3c/svgwg/issues/337
An implementation of both the de-facto standard web algorithm and the spec compliant algorithm, with a compatibility attribute named “midline” to choose between the de-facto standard “sharp” value and the spec conformant “smooth” value, is available here:
I suggest, that Edge makes the de-facto web standard (and much more efficient in both computation and memory) implementation available by default, and the conformant algorithm behind an attribute with some appropriate name and values, which would be added to the SVG 2.0 draft.
What are your thoughts on this?
Is the behavior that all existing text on a path svg content on the web has been designed against and the fact that it works the same way as when it was authored or not, more important?
Or is spec conformance more important?
Should a compatibility attribute be added?
<svg width="900" height="600" viewBox="180 0 330 220" xmlns="http://www.w3.org/2000/svg">
<path id="textpath" d="M225,150 v-80 h240 v80 Z"></path>
<use href="#textpath" stroke="#00f" stroke-width="1px" fill="none"></use>
<text stroke="#000" word-spacing="0" letter-spacing="2" alignment-baseline="top" style="font-family:AvenirNextLTPro-Regular;font-size:20">
<textPath href="#textpath" letter-spacing="2">
<tspan letter-spacing="2" alignment-baseline="bottom" dx="73" dy="-5">SVG Text on a linear path test, testing 1, 2, 3, fi.</tspan>
Comments and activity
I suggest we continue discussion of this in the SVG wg github repo issue, as I don’t really use the email which this account is bound to, and might not notice when replies are made. I also suggest a discussion between the various browser vendors/teams to reach a consensus regarding how to resolve this.
- Microsoft Edge Team
Changed Assigned To to “James M.”
Changed Status to “Won’t fix”
Thank you for providing this information about the issue. We are best suited to test and correct broken features for future releases of MS Edge.
Browser standards are coordinated by http://www.w3.org/
If you have suggestions and feature requests specific to Edge, please feel welcome to submit your request at http://uservoice.microsoftedge.com where other developers can up-vote your suggestion.
The MS Edge Team