html - 使用SVG文本路径制作圆圈的公式？

Question

在 SVG 中使文本路径成为圆形的一般公式是什么？

给定一个以像素为单位的半径“r”，您为路径元素的“d”参数输入了什么 -<path d = "

这是一个要测试的小提琴：

http://jsfiddle.net/gfNT6/5/

<embed width="100" height="100" type="image/svg+xml" src="path.svg">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <path id="textPath" d="M50 50 C20 0 190 0 250 50"/>
    </defs>     
    <text fill="black" font-size = "12" font-family = "arial">
      <textPath id = 'test' xlink:href="#textPath">Text on a Path ... Text on a Path</textPath>
    </text>  
  </svg>
</embed>

Answer 1

对于三次贝塞尔曲线，比率为 4 * (sqrt(2) -1) / 3，即 0.5522847498。如果你想要一些数学脑筋急转弯，不难推导出来。

因此，要创建一个圆弧或完整的圆，只需绕过象限，在半径上加上和减去那个因子。

<path id="textPath"
       d="M 0,-1
          C 0.5523, -1   1, -0.5523    1,0
          C 1, 0.5523    0.5523, 1     0,1
          C -0.5523, 1   -1, 0.5523    -1,0
          C -1, -0.5523  -0.5523, -1   0,-1"
      stroke="blue" stroke-width="0.01" fill="none" transform="translate(150,150) scale(100,100)"/>

  <text fill="black" font-size = "12" font-family = "arial">
  <textPath id = 'test' xlink:href="#textPath">Text on a Path ... Text on a Path</textPath>
</text>  

在这里小提琴：http: //jsfiddle.net/DP8pu/1/