SVG 教程

SVG要素

SVG <tspan>要素

SVG <tspan>要素は、SVG内で多行テキストを描画するために使用されます。各行のテキストを絶対に配置する必要はなく、<tspan>要素は、前の行のテキストに対して一行のテキストを配置する可能性を提供します。また、<tspan>要素は、一度に複数行のテキストを選択してコピー・ペーストできるようにして、単なるtext要素以上の利便性を提供します。

tspanの例

これはシンプルな<tspan>例です：

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20"　y="15">
　　　　　　　　<tspan>tspan　line　1</tspan>
　　　　　　　　<tspan>tspan　line　2</tspan>
　　　　</text>
</svg>

テストを試してみる‹/›

これは結果画像です：

注意<tspan>结果如何导致文本行相对于彼此（彼此之后）定位。

垂直位置

如果希望将线垂直相对放置，可以使用dy　属性（delta y）：

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20"　y="15">
　　　　　　　　<tspan>tspan　line　1</tspan>
　　　　　　　　<tspan　dy="10">tspan　line　2</tspan>
　　　　</text>
</svg>

テストを試してみる‹/›

现在，由于dy第二个<tspan>元素的属性设置为“ 10”，因此第二行文本显示在第一行文本下方10ピクセル处。这是结果图像：

如果要将<tspan>元素定位在绝对y位置y，请像对待<text>元素一样使用属性。

dy属性内に複数の数字を記入すると、各数字が<tspan>要素内のテキストの文字に適用されます。これは例です：

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<text x="10"　y="15">
　　　　　　　　　　　　<tspan　dy="5　10　20"
　　　　　　　　　　　　　　　　123
　　　　　　　　　　　　</tspan>
　　　　　　　　</text>
　　　　</svg>

テストを試してみる‹/›

これは生成された画像です。字形間の垂直間隔がどのように変化するかご注意ください。

水平位置

テキストをx軸上に相対的に配置するには、dx属性（delta x）を使用できます。以下の例ではdxが設定されています：30の効果です。注意してください、今、第二行のテキストは第一行のテキストの終わり（開始ではなく）に表示されています30ピクセル：

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20"　y="15">
　　　　　　　　<tspan>tspan　line　1</tspan>
　　　　　　　　<tspan　dx="30"　dy="10">tspan　line　2</tspan>
　　　　</text>
</svg>

テストを試してみる‹/›

これは結果画像です：

dx属性内に複数の数字を指定すると、各数字が<tspan>要素内の各文字に適用されます。これは例です：

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text　x="10"　y="20"
　　　　<tspan　dx="5　10　20"123</tspan>
</text></svg>

テストを試してみる‹/›

これは結果画像です：

x属性を設定してテキスト行のx座標を固定することで、すべての未調整の行のリストを下に表示するのに役立ちます。これは三行でxが設定された例です：10　の例：

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text　y="20"
　　　　　　　　<tspan　x="10">tspan　line　1</tspan>
　　　　　　　　<tspan　x="10"　dy="15">tspan　line　2</tspan>
　　　　　　　　<tspan　x="10"　dy="15">tspan　line　3</tspan>
　　　　</text>
</svg>

テストを試してみる‹/›

これは結果画像です：

スタイルtspan要素

要素のスタイルを独立に設定することができます。したがって、<tspan>要素を使用してテキストブロックのスタイルを設定し、他のテキストと区別することができます。これは例です：

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text　x="10"　y="20"
　　　　ここには<tspan　style="font-weight:　bold;">bold</tspan>　word.
</text></svg>

テストを試してみる‹/›

これは結果画像です：

基線オフセットの上付きや下付き

您可以使用baselinen-shiftCSS属性使用<tspan>要素で上付きや下付きを生成します。これはSVGのbaselinen-shift例，表示了如何：

例

<svg　width="500"　height="100"　　　　
<text x="10"　y="20"　　　　
以下は、<tspan style="baseline">で混ぜたテキストです-shift:　super;">上書き</tspan>　　　　
および　<tspan style="baseline"-shift:　sub;">下書き</tspan>　mixed　with　normal　　　　
text.　　　　
</text>　　　　
</svg>

テストを試してみる‹/›

これは生成された画像です。（注意：firefoxがサポートしていない可能性があります）

SVG <tref>要素 SVG <text> テキスト