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>

缺少SVG TextPath字符

1 个答案: