SVGチュートリアル

SVG オンラインエディタ

SVG<text>テキスト

SVG 要素

テキストを描画するには、<text>要素を使用します。

例

　　　　　　<h1>SVG テキスト</h1>
　　　　　　<svg　width="550"　height="150">
　　　　　　　　　<g>
　　　　　　　　　　　　<text　x="40"　y="23"　>テキスト:　</text>
　　　　　　　　　　　　<text　x="40"　y="40"　fill="rgb(121,0,121)">ja.oldtoolbag.com ベーシックトレーニング </text>
　　　　　　　　　</g>　
　　　　　　</svg>

テストを見て‹/›

実行後の効果は以下の通りです：

SVG テキスト

使用方法説明

x：テキストの左上角の位置を定義します。

y：テキストの上部位置を定義します。

width：幅を定義します。

height：高さを定義します。

fill：fill属性は填充色を定義します。

回転テキスト

これは、回転テキストを作成するために使用されます。

例

<svg　height="100"　width="200">
　　<text　x="0"　y="1530　20,40)">ja.oldtoolbag.com</text>
</svg>

テストを見て‹/›

実行後の効果は以下の通りです：

使用方法説明

x：左上角の位置を定義します。

y：上部位置を定義します。

width：幅を定義します。

height：高さを定義します。

fill：fill属性は填充色を定義します。

マルチラインテキスト

これは、マルチラインテキストを作成するために使用されます。使用<tspan>要素で、<text>要素を任意の数のサブグループに配置できます。

例

<svg　width="570"　height="100">
　　<g>
　　<text　x="40"　y="23"　マルチラインテキスト:　</text>
　　<text　x="40"　y="40"　fill="rgb(121,0,121)">ja.oldtoolbag.com
　　　<tspan　x="40"　y="60"　font-weight="bold">　オンラインベーシックトレーニング.　</tspan>
　　　</text>
　　</g>
　</svg>

テストを見て‹/›

実行後の効果は以下の通りです：

使用方法説明

x：左上角の位置を定義します。

y：上部位置を定義します。

width：幅を定義します。

height：高さを定義します。

fill：fill属性は填充色を定義します。

ハイパーリンクテキスト

これは、ハイパーリンク付きのテキストを作成するために使用されます。

例

　　　　　　<svg　width="500"　height="100">
　　　　　　　　　<g>
　　　　　　　　　　　　<text　x="20"　y="10"　テキストリンク:　</text>
　　　　　　　　　
　　　　　　　　　　　　<a　xlink:href="https://ja.oldtoolbag.com/svg-tutorial"　target="_blank">
　　　　　　　　　　　　　　　<text　font-family="Verdana"　font-size="30"　x="40"　y="40"　
　　　　　　　　　　　　　　　fill="rgb(121,0,121)">ja.oldtoolbag.com</text>
　　　　　　　　　　　　</a>
　　　　　　　　　</g>
　　　　　　</svg>

テストを見て‹/›

実行後の効果は以下の通りです：

使用方法説明

x：左上角の位置を定義します。

y：上部位置を定義します。

width：幅を定義します。

height：高さを定義します。

fill：fill属性は填充色を定義します。

SVG<tspan>要素 SVG<marker>マーカー