Cross-Browser SVG Text Baseline Alignment
Cross-Browser SVG Text Baseline Alignment
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:
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
Post a Comment