While working on the "new" text renderer i found an issue with text rendering in svg:
When setting a background color to the text, the bounds of the resulting svg text elements are not computed correctly.
This leads to the following result, where the background is shorter than the text:
What it should look like:
SVG:
This is because we can't compute the actual width of the text element, as we only create the xml structure of the svg document, but we don't actually render something (this is done individually by the browser for example).
There are solutions to this exact problem which we can use to fix this issue (see the approach in this branch), but we will face it again with the planned features for the new text renderer sadly, as we need the bounds calculation for those.
While working on the "new" text renderer i found an issue with text rendering in svg:
When setting a background color to the text, the bounds of the resulting svg text elements are not computed correctly. This leads to the following result, where the background is shorter than the text:
What it should look like:
SVG:
This is because we can't compute the actual width of the text element, as we only create the xml structure of the svg document, but we don't actually render something (this is done individually by the browser for example).
There are solutions to this exact problem which we can use to fix this issue (see the approach in this branch), but we will face it again with the planned features for the new text renderer sadly, as we need the bounds calculation for those.
Fix
The changes in the svg-text-background-fix branch fix the text background bug:
Expected:
SVG:
Currently the rendering seems to be a bit blurry in the macOS svg preview tool (not officially supported as stated by mdn webdocs: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFlood), but Chrome and Firefox are rendering it correctly.