8

SVG に関連する丸で囲まれたテキストに問題がありました。私の目標は、その上に書くことができるパスを作成するだけでなく、円の上部からパスを追跡しながらテキストを中央に配置することです。

例

こんな感じです（画像中）

問題

現在、textPath + パスの組み合わせを使用してパスを生成し、それに書き込みます。

<svg>
<defs>
<path id="textPath" d="M 200 175 A 25 25 0 0 0 182.322 217.678" />
</defs>
<text x="25" y="0"><textPath xlink:href="#textPath" startOffset="0" >here goes my text</textPath></text>
</svg>

また、Raphael ライブラリを使用して動作を管理しようとしましたが、真剣にやりたいことができません。実際にそれを機能させることができた人はいますか？または、そうする方法はありますか？

4

1 に答える 1

21

描画する楕円弧の上半球全体としてテキスト パスを定義します。

<path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500" />

を 50% に設定しstartOffsetます。textPathxlink の名前空間定義がないため、svg ファイルは整形式ではないことに注意してください。以下は、動作するスタンドアロンの例です。

<?xml version="1.0" encoding="utf-8"?>
<!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xhtml="http://www.w3.org/1999/xhtml"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="20cm" height="20cm"
   viewBox="0 0 1000 1000"
   preserveAspectRatio="xMinYMin"
   style="background-color:white; border: solid 1px black;"
>
<defs>
<path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500"/>
</defs>
<text x="0" y="0" text-anchor="middle" style="font-size:30pt;"><textPath xlink:href="#textPath" startOffset="50%" >here goes my text</textPath></text>
</svg>

re: 円を一周するための解決策についてのコメント: 要点は、次のように、円周全体に沿って延びるテキスト パスを定義することです。

<?xml version="1.0" encoding="utf-8"?>
<!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xhtml="http://www.w3.org/1999/xhtml"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="20cm" height="20cm"
   viewBox="0 0 1000 1000"
   preserveAspectRatio="xMinYMin"
   style="background-color:white; border: solid 1px black;"
>
<defs>
<path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"/>
</defs>
<text x="0" y="0" text-anchor="middle" style="font-size:30pt;"><textPath xlink:href="#textPath" startOffset="50%" >this is a merry-go-round of all my text wrapped around a circle, a vbery big one</textPath></text>
</svg>
于 2013-03-19T10:09:54.007 に答える