7

SVG のレンダリングには、jQuery SVG プラグインを使用しています。そして、各パスとポリゴンにテキストを追加したいと思います。jsFiddleでは、プラグインによって生成されたマークアップを確認できます。

テキストを作成するために、次のコードを書きました。

var svgg = $("#rsr").svg('get');
var texts = svgg.createText();
svgg.textpath($("#Layer_x0020_1"),id, texts.string('We go ').
   span('up', { dy: -30, fill: 'red' }).span(',', { dy: 30 }).
   string(' then we go down, then up again'));

jsFiddleのコードでは、textpathタグが存在することがわかりますが、表示されません。各パスの中央にテキストを追加する方法は?
ありがとう。

4

2 に答える 2

14

テキストを図形の上に直線で配置するには、バウンディング ボックスの中央に以下を参照してください。

http://jsfiddle.net/dYuAA/114/

テキストを配置するためのJavaScriptを追加するだけです。

function addText(p)
{
    var t = document.createElementNS("http://www.w3.org/2000/svg", "text");
    var b = p.getBBox();
    t.setAttribute("transform", "translate(" + (b.x + b.width/2) + " " + (b.y + b.height/2) + ")");
    t.textContent = "a";
    t.setAttribute("fill", "red");
    t.setAttribute("font-size", "14");
    p.parentNode.insertBefore(t, p.nextSibling);
}

var paths = document.querySelectorAll("path");
for (var p in paths)
{
    addText(paths[p])
}

上記はパス要素のみを見ていますが、セレクターを微調整して必要なものを含めることができます。

于 2012-06-13T10:32:12.433 に答える
1

ここにはいくつかの問題があります。

a) SVG は大文字と小文字が区別されるため、textpath ではなく textPath です。

b) textPath を<text>有効にするには、要素で囲む必要があります

これが jsFiddle の修正です。

于 2012-06-12T09:38:54.293 に答える