SVG icon indicating copy to clipboard operation
SVG copied to clipboard

Issue when using textPath with text-anchor='middle'

Open frankaz opened this issue 5 years ago • 0 comments

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.

frankaz avatar Jun 24 '20 22:06 frankaz