SVG
SVG copied to clipboard
Issue when using textPath with text-anchor='middle'
When using text-anchor="middle" in conjunction with a text path, the x-coordinates of the text shifts to the left. Only text-anchor "middle" has an issue, where "start"/"end" are okay. In the example below, the path has a red stroke to see the correct placement. Changing the text will change the x-coordinates. The longer the name, the more the text shifts to the left. Svg Version 3.1.0.0
string svgCurvedName = (@"<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='500' height='500' viewBox='0 0 500 500' xml:space='preserve'>
<g>
<path id='curve' d='m0,185 c43,-17 110,-62 250,-60 c60,0 125,0 250,60' fill='transparent' stroke='red' />
<text x='50%' text-anchor='middle' fill='#f9f9f9' stroke='#010101' stroke-width='4.22' stroke-linejoin='miter' stroke-miterlimit='10' font-family='Jersey M54,Arial' font-size='160'>
<textPath xlink:href='#curve'>NAME</textPath>
</text>
</g>
</svg>
");
var mySvg = SvgDocument.FromSvg<SvgDocument>(svgCurvedName);
var bitmap = mySvg.Draw();
bitmap.Save("_test.png", ImageFormat.Png);
Desired Output: https://codepen.io/frankaz/pen/yLeXgNW
My workaround is creating two SvgDocuments. The first is text-only (with no path). The bounds of this are measured. Then the text path is created with text-anchor='start' and x= to the calculated distance used from measuring the first document.