Cross-Browser SVG Text Baseline Alignment


Cross-Browser SVG Text Baseline Alignment



Chrome SVG Render Screenshot



This is how SVG text is rendered in browser for Chrome with the following (note in react so camel case attributes)


<text x="50%" y="50%"
className='middleText'
textAnchor="middle"
alignmentBaseline="middle"
>{style.displayVal.toFixed(precision)}</text>



This is how the text renders in Firefox:



Firefox SVG Render Screenshot



What is the best way you've found to get consistent baseline crossbrowser?




1 Answer
1



replace alignmentBaseline with dominantBaseline.



Firefox does not currently support the former property but does support the latter.






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

Export result set on Dbeaver to CSV

Opening a url is failing in Swift