缺少 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 o '时钟）：

<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>

缺少 SVG TextPath 字符

SVG TextPath characters missing

svg

curve