たのしいXML: SVG

SVGの基本的な要素: text要素(その1)

2002年3月10日(日)更新

■SVGの基本的な要素: text要素(その1)

たけち: 今回はtext要素について学習するね。

さらら: は～い。

たけち: じゃ、さっそく、text要素の書き方からね。

text要素の書き方

さらら: あら。textでも、strokeとかfillってあるんだ。

たけち: うん。文字の外形線を表すstrokeと外形線で囲まれた領域を塗りつぶすfillがあるんだね。

さらら: 文字も図形的に考えているのね。あとは、font-familyでフォント名、font-sizeで文字の大きさを指定するのね。

たけち: そうだね。じゃ、だいたいの意味を図に載せておくね。

さらら

text要素の各属性の意味

■text要素のサンプル(1)

さらら: だいたいのイメージはわかったわ。

たけち: じゃあ、text要素のサンプルをみて具体的に確認しておこうね。

さらら: はい。

SVGドキュメント　サンプル(textあれこれ)
<?xml version="1.0" standalone="yes" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg"> <desc>text element</desc> <desc>Example text(1) - 'Hi, svg!' in blue</desc> <text x="50" y="40" font-size="30" > Hi, svg! </text> <text x="50" y="80" font-family="Verdana" font-size="40" fill="skyblue" > Hi, svg! </text> <text x="50" y="140" font-family="Courier" font-size="60" fill="navy" > Hi, svg! </text> <text x="50" y="240" font-family="Century" font-size="90" fill="none" stroke="green" stroke-width="2"> Hi, svg! </text> <text x="50" y="350" font-family="Arial" font-size="110" fill="none" stroke="red" stroke-width="5"> Hi, svg! </text> </svg>

SVGドキュメント　サンプル(textあれこれ)

<?xml version="1.0" standalone="yes" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">

    <desc>text element</desc>

    <desc>Example text(1) - 'Hi, svg!' in blue</desc>

<text x="50" y="40" font-size="30" >
    Hi, svg!
    </text>

<text x="50" y="80"
    font-family="Verdana" font-size="40" fill="skyblue" >
    Hi, svg!
    </text>

<text x="50" y="140"
    font-family="Courier" font-size="60" fill="navy" >
    Hi, svg!
    </text>

<text x="50" y="240"
    font-family="Century" font-size="90" fill="none"
    stroke="green" stroke-width="2">
    Hi, svg!
    </text>

<text x="50" y="350"
    font-family="Arial" font-size="110" fill="none"
    stroke="red" stroke-width="5">
    Hi, svg!
    </text>

</svg>

たけち: これを"text_1.svg"という名前のファイルにして、"text_1.html"からリンクして表示させると次の図のようになるね。

text要素のサンプルファイル text_1.html
viewportのサイズは、500px×400pxです。

※Adobe社のSVG Viewerがインストールされていると下のイメージのように表示されるはずです。

Adobe社のSVG Viewerがインストールされているとこのように表示されるはずです。

さらら: そっか～。。。あっ、日本語の例が無いけど・・・・どうなの?

たけち: あっ、そうそう。日本語についてや、その他のtext要素に関するお話を次回しようね。

さらら: あっ、そうなの。じゃぁ、たのしみにしてるわ。

次回は、text要素(その2)です。 .... (^ ^*

たけち

■補足: "text_1.html"ファイルの内容は次のようです。

<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <title>SVGのtext要素の例(1)です</title>
  </head>
  <body>
    <p>SVGのtext要素の例(1)です。<br />各要素の属性を色々と変えています。</p>
      <embed src="text_1.svg" name="SVGEmbed" width="500" height="400" type="image/svg-xml" pluginspage="http://www.adobe.co.jp/svg/viewer/install/">

  </body>
</html>