svgに複数行のテキスト（段落）を追加するには

Question

私はsvgに複数の行テキストを追加したいと思います。これはsvg（donot overflow）内に含まれています。どうやってやるの？私は 'テキスト'タグがsvgで使用されていることを知っていたものが、私はその単一の裏地を知るようになった。私はそれに特定のsvgに含まれるようにテキストの長さを与えると、その単語はお互いに重なります。どのように私はsvgタグで調整する複数の行のテキストを置くことができますか？私が試したコードは以下の通りです： - <svg width="21cm" height="29.7cm" style="border:1px solid black;"> <text x="6.4cm" y="3.6cm" textLength="50" style="font-size:48px;">The paragraph here</text> </svg>

Answer 1

これは動作しません。 SVGには、改行の仕組みがありません。言っ

、あなたのようにHTMLに<p>タグをカプセル化することができるだろうforeignObject：

<svg xmlns="http://www.w3.org/2000/svg" 
    width="21cm" height="29.7cm" style="border:1px solid black;"> 
    <foreignObject x="6.4cm" y="3.6cm" width="10cm" height="10cm"> 
    <p xmlns="http://www.w3.org/1999/xhtml" 
     style="font-size:48px;">The paragraph here</p> 
    </foreignObject> 
</svg> 

名前空間宣言を与えられなければならないことに注意してください、あなたはこのための有効なXHMLを記述する必要があります作業。

さらに、foreignObjectはSVGコンテキストの一部であるため、widthおよびheightを設定する必要があります。それ以外の場合は、固有のサイズがありません。