5

すでに次のようなものが含まれているDOMから始めます

<svg id="svg0" width="600" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">

</svg>

...プログラムで要素を変更して、d3.select("#svg0")最終的に

<svg id="svg0" width="600" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="20" y="20">
Lorem ipsum 
<tspan style="alignment-baseline:text-before-edge">dolor</tspan>
sit amet</text>
</svg>

これは私が得ることができる限りです：

var $svg = d3.select("#svg0");
$svg.append("text").text("Lorem ipsum ")
                   .attr({x:"20", y:"20"});

残りは簡単なように見えますが、私はこの 2 時間を費やしてすべての「明白な」ことを試みましたが、成功しませんでした。1

上記のタスクを完了するために何をしなければなりませんか?

1私はあまりにも多くのことを試みましたが、それらすべてを説明することはできません。text メソッドがセッターとして使用されるとtextContent、text オブジェクトが以前に持っていたものはすべて消去されると言えば十分です。.text(...)これは、事実上、このメソッドを 1 回だけ呼び出すことができることを意味します。これにより、" sit amet" フラグメントを追加するために 2 回目の呼び出しに依存するソリューションが排除されます)。

4

2 に答える 2

2

Snap.svgでそれを行う方法は次のとおりです。

var paper = Snap("#svg0");
var t1 = paper.text(50, 50, "Snap");
var t2 = paper.text(50, 70, ["S","n","a","p"]);
<script src="https://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg id="svg0" width="600" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>

于 2015-06-17T00:52:01.813 に答える