Svg-text
提供：Dev Guides
SVG-テキスト
<text>要素は、テキストの描画に使用されます。
宣言
以下は、 <text> 要素の構文宣言です。 主な属性のみを示しました。
<text
x="x-cordinates"
y="y-cordinates"
dx="list of lengths"
dy="list of lengths"
rotate="list of numbers"
textlength="length"
lengthAdjust="spacing" >
</text>属性
| Sr.No. | Attribute & Description |
|---|---|
| 1 | x − x axis coordinates of glyphs. |
| 2 | y − y axis coordinates of glyphs. |
| 3 | dx − shift along with x-axis. |
| 4 | dy − shift along with y-axis. |
| 5 | rotate − rotation applied to all glyphs. |
| 6 | textlength − rendering length of the text. |
| 7 | lengthAdjust − type of adjustment with the rendered length of the text. |
例
テストVG
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="12" >Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.finddevguides.COM</text>
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。
回転するテキスト
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="12" >Multiline Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.finddevguides.COM
<tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
<tspan x="30" y="70">We teach just for free.</tspan>
</text>
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。
複数行テキスト
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="570" height="100">
<g>
<text x="30" y="12" >Multiline Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.finddevguides.COM
<tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
<tspan x="30" y="70">We teach just for free.</tspan>
</text>
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。
ハイパーリンクテキスト
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="10" >Text as Link: </text>
<a xlink:href="http://www.finddevguides.com/svg/" target="_blank">
<text font-family="Verdana" font-size="20" x="30" y="30"
fill="rgb(121,0,121)">WWW.finddevguides.COM</text>
</a>
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。
