1

SVGでテキストパスを円にするための一般式は何ですか?

これには、パス要素の「d」パラメーターに何を入力するかをピクセル単位で半径「r」が指定されます-<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>
4

1 に答える 1

4

3 次ベジエの場合、比率は 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/

于 2013-06-10T05:52:13.343 に答える