Question

在SVG中将文本路径设为圆圈的通用公式是什么？

给出半径'r'（以像素为单位）您为路径元素的'd'参数添加了什么 - <path d = "

这是一个小小的测试：

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

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

1 个答案: