SVGの基本的な要素: circle/ellipse要素

2002年2月24日(日)更新

■SVGの基本的な要素: circle要素

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

さらら: は〜い。circleって円で、ellipseって楕円よね。

たけち: そうだね。まずは、circle要素について見てみよう。

さらら

たけち: さっそく、circle要素の主な属性について、書き方を載せておこうね。一部の属性については省略してあるんだ。必要になったときに追加説明するね。rect要素ですこし慣れているから問題ないと思うけど。

さらら: そうねぇ〜・・・・どれどれ。。。。

cicle要素の書き方

さらら: あらっ、rect要素より簡単そうね。

たけち: それならもう安心だね。じゃあ、前回と同じようにcircle要素のそれぞれの属性の意味を確認しておこうね。特に説明はいらないと思うけど。

さらら: そうね、図で見たほうが誤解が無くっていいから、うれしいわ。

さらら

circle要素の各属性の意味

■SVGの基本的な要素: ellipse要素

たけち: じゃあ、次はellipse要素の主な属性について、書き方を載せておこうね。

さらら: あらら、ずい分せっかちねぇ〜。でも、まっいいわ。

たけち: あっ、ごっごめん。 (^ ^;

ellipse要素の書き方

さらら: circle(円)要素だと半径 r だけだったのが、ellipse(楕円)要素だと、 rx ryの二つになるのね。

たけち: そうだね。あとはcircleとellipseは同じ属性だね。念のためにellipse要素のそれぞれの属性の意味を図で確認しておこうね。

さらら: えぇ。

さらら

ellipse要素の各属性の意味

■circle要素とellipse要素のサンプル

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

さらら: そうね。そのほうがやっぱり安心するのよね、なんだか。

たけち: 次のサンプルリストを見て。
SVGドキュメント　サンプル(circleとellipseあれこれ)

<?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="450" xmlns="http://www.w3.org/2000/svg">

  <desc>circle and ellipe element</desc>

<text x="180" y="30" fill="navy" font-size="16">circle element</text>

  <circle cx="80" cy="80" r="30" />

  <circle cx="220" cy="80" r="40"
      fill="white" stroke="black" />

  <circle cx="380" cy="80" r="50"
      fill="white" stroke="red" />

<text x="170" y="150" fill="navy" font-size="16">ellipse element</text>

  <ellipse cx="80" cy="200" rx="60" ry="40" />

  <ellipse cx="220" cy="200" rx="60" ry="40"
      fill="white" stroke="black" stroke-width="5" />

  <ellipse cx="380" cy="200" rx="60" ry="40"
      fill="white" stroke="red" stroke-width="5" />

  <ellipse cx="80" cy="340" rx="40" ry="60"
      style="fill:skyblue; stroke-width:7;" />

  <ellipse cx="220" cy="340" rx="40" ry="60"
      style="fill:skyblue; stroke:navy; stroke-width:7;" />

  <ellipse cx="380" cy="340" rx="40" ry="60"
      style="fill:#eee8aa; stroke:#80800; stroke-width:13;" />
</svg>

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

circle/ellipse要素のサンプルファイル circle_1.html
viewportのサイズは、500px×500pxです。

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

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

さらら: SVGの基本的な要素について、すこし分かってきたような気がするわ。最初は心配だったけど、なんとかついてけそう。。。

たけち: もうすこし要素をやったら、次のステップにいこうね。

さらら: えぇ。でも、やさしくね。

たけち: 分かってますよ。さらら姉さま。

次回は、SVGの基本的な要素: line/polyline/polygon要素についてです。 .... (^ ^*

さらら

■補足: "circle_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のcircleとellipse要素の例です</title>
  </head>
  <body>
    <p>SVGのcircleとellipse要素の例です。
circle要素とellipse要素の各属性を色々と変えています。</p>
      <embed src="ファイル名.svg" name="SVGEmbed" width="500" height="450" type="image/svg-xml" pluginspage="http://www.adobe.co.jp/svg/viewer/install/">

  </body>
</html>