SVG TextPath 字符缺失

Question

我正在尝试显示使用 JavaScript 生成的弯曲文本 当我增加曲率时，一些字符消失了

这是我创建的JSFiddle

这是我的函数，它根据曲线百分比和文本大小生成路径数据

public getPathData (width, height, curve): string {
  const positive_curve = (curve > 0);
  const perimeter = width / Math.abs(curve) * 100;
  const radius = perimeter / (2 * Math.PI) + (positive_curve ? 0 : height);
  const sign = positive_curve ? 1 : 1;
  const side = positive_curve ? 1 : 0;
  const diameter_parameter = sign * (2 * radius);
  return `m0,${radius} 
          a${radius},${radius} 0 0 ${side} ${diameter_parameter},0
          a${radius},${radius} 0 0 ${side} ${-diameter_parameter},0Z`;
  }

这是浏览器问题吗？还是问题出在路径本身？

根据@Paul LeBeau 的回答更新了代码

public getPathData (width, height, curve): string {
  const perimeter = width / Math.abs(curve) * 100;
  const radius = perimeter / (2 * Math.PI);
  const diameter = radius * 2;
  if (curve > 0) {
    return `m${radius},${diameter} 
            a${radius},${radius} 0 0 1 0 ${diameter}
            a${radius},${radius} 0 0 1 0 ${diameter}Z`;
  } else {
    return `m${radius},${diameter}  
            a${radius},${radius} 0 0 0 0 ${diameter}
            a${radius},${radius} 0 0 0 0 ${-diameter}Z`;
  }
}

它基本上根据曲线百分比 [-100%, 100%] 将文本环绕在圆的内部或外部

Answer 1

您的问题是由于路径开始的位置。路径文本不会绘制在路径的开始或结束之后。在下图中，我在路径的开始处放置了一个黑点：

<svg viewBox="-270 -270 1290 1280" width="257" height="256">
  <path id="curve" fill="white" stroke="red" stroke-width="1px" 
  d="m0,400 
    a400,400 0 0 1 800,0
    a400,400 0 0 1 -800,0Z">
  </path>
  <circle cx="0" cy="400" r="20"/>
  
  <text font-size="300" font-family="'Arial'" fill="#ff0000" x="0" y="0" text-anchor="middle">
    <textPath href="#curve" startOffset="25%">This is a new test</textPath>
  </text>
</svg>

即使它是一个封闭的路径，文本也不会从路径的起点回绕到路径的末端。任何超出开头的文本都会被截断。

由于我假设您可能希望文本从 7 点到 5 点环绕圆圈，因此您最简单的解决方案是将路径的起点移动到圆圈的底部（6 点):

<svg viewBox="-270 -270 1290 1280" width="257" height="256">
  <path id="curve" fill="white" stroke="red" stroke-width="1px" 
  d="m400,800 
    a400,400 0 0 1 0,-800
    a400,400 0 0 1 0,800Z">
  </path>
  <circle cx="400" cy="800" r="20"/>
  
  <text font-size="300" font-family="'Arial'" fill="#ff0000" x="0" y="0" text-anchor="middle">
    <textPath href="#curve" startOffset="50%">This is a new test</textPath>
  </text>
</svg>