- From: Mikael Sand via GitHub <sysbot+gh@w3.org>
- Date: Wed, 23 Aug 2017 15:57:35 +0000
- To: public-svg-issues@w3.org
Have a look at this: https://stackoverflow.com/a/39886640/1925631 Essentially, make a path which spans the exact coordinates where you want to spread your text on a path. Measure this path. Then, measure how many pixels your text requires, with a font-size of 1px (and other desired font-features). Now adjust the font-size to fill your desired percentage of the available path advance width. Adjust start-offset and text-anchor. Now finally calculate your author specified lengthAdjust value to get exact alignment on low precision / non-conformant renderers. Finally, if you need to support viewers without text on a path rendering support, you can use a conformant viewer with javascript support to create a backwards compatible/fallback version. Render the content and use the SVG DOM api to fetch the x, y and rotate values for each character/glyph, now create a new SVG DOM representation with those attributes specified. You might need javascript to calculate absolute width and height for the root svg element as well, and a correctly specified viewBox, and cascade/resolve/convert all css selectors/rules/properties to inline attributes. But this way you can get cross-platform, cross-browser/viewer rendering of text, with a single compilation step per immutable source file version. I've also made a gist to ease the last step, of resolving the css and removing all classNames, while preserving the rendered end-result: https://gist.github.com/msand/4b37d3ce04246f83cb28fdbfe4716ecc This is for the purpose of a single universal svg + javascript codebase, and web+ios+android software development (based on react + react-native + react-native-svg) -- GitHub Notification of comment by msand Please view or discuss this issue at https://github.com/w3c/svgwg/issues/341#issuecomment-324381153 using your GitHub account
Received on Wednesday, 23 August 2017 15:57:35 UTC