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画像レンダリングをサポートしています。

Svg-text

SVG-テキスト

宣言

属性

例

出力

回転するテキスト

出力

複数行テキスト

出力

ハイパーリンクテキスト

出力

目次