追加<text>〜<svg>〜

Question

私はSVGを勉強していて、私が本当に苦労しているという非常に簡単な質問があります。 svgタグにテキストを追加するには？ 私は次のような結果を達成したい：私は、このやっている

Picture

を：

svg.append("text") 
     .attr("x", width/2) 
     .attr("y", height - marginBottom/1 * 2) 
     .text("text 2") 
     .attr("fill","#808080") 
     .attr("text-anchor","middle") 
     .css("font-size", "14px"); 

をしかし、ブラウザがエラーを示しています

Uncaught TypeError: svg.append(...).attr(...).attr(...).text(...).attr(...).attr(...).css is not a function.

しかしため、同時に<line>svg.append作品：

svg.append("line") 
    .attr("y1", height - marginBottom/3 * 2) 
    .attr("y2", height - marginBottom/3 * 2) 
    .attr("x1", marginLeft/3 * 2) 
    .attr("x2", width - 20) 
    .attr("stroke-width", 1) 
    .attr("stroke", "#5A97C3"); 

ご理解ください。

Answer 1

エラーが説明するように：例えば、A（これはあなたが探しているものであればsvg.style("font-size", "14px");

Answer 2

わからない、しかし、あなたは、コンテナにSVGを置くことができます。cssという名前の関数がありません、私はあなたがstyleを意味だと思いますdiv）、div内にテキスト要素を追加します。例：

#myDiv{position:relative;width:200px;color:yellow;border:1px solid green;} 
 
.abs{position:absolute;} 
 
#innerDiv1{top:0;left:0px;width:90px;height:15px;border:1px solid purple;} 
 
#innerDiv2{bottom:10px;left:20%;} 
 
.rotate {-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="myDiv"> 
 
    <img id="mySvg" src="http://placekitten.com/200/200" /> 
 
    <div id="innerDiv1" class="abs rotate">Text One</div> 
 
    <div id="innerDiv2" class="abs">Text Two</div> 
 
</div>

---

回転したテキストは、私のデモでグラグラですが、コンセプトが受け入れ可能である場合、私は運動としてそれを残しておきます。