数学



第2章.SVG HTML5版

 MathML関連を見ていたら、SVG(Scalable Vector Graphics)で、XHTML上で、円とかが簡単に描けるようである。中学校の円周角の定理くらいなら、少し勉強すれば描けるのかもと思い、実験です。

 「円周角の定理」をGoogleで検索すると、かなり凝ったweb頁が出てきますが、大半はjavaスクリプトまで使っているようなので、スクリプトなどプログラムを使わないXML+SVGだけでどこまでできるのかを試してみようと思います。javaでSVGを使っているだけかも知れないですが、・・・。

 別のweb頁のサンプルを貼り付けて試行錯誤したところ、拡張子をxmlにして、MIMEタイプにしておかないとSVG表示しないようです(表示確認はOpera 9.63)。エンコードは、UTF-8です。サーバとの兼ね合いかもしれませんが、拡張子をxhtmlにすると、SVGの部分は表示されなくなるので、ここでは、xmlにする必要はあるようです。
 メモついでに書いておくと、「XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN」は、us-ascii以外のエンコードは未対応のようで、W3Cの自動の文法チェックは日本語が入るとできないようです。

 W3CのSVGのサンプルなどを元に円周角の定理に使う標準的な図を下記に書いてみました。

 円周角の定理は、∠ACB=1/2 ∠AOB の事ですが、この証明は、3種に場合分けして証明します。証明が1番簡単なのは、直線ACもしくは直線BCの1辺が円の直径と同一の場合で、下記図の場合は2番目の難しさでしょうか?

 下記図の場合は、点Cと点Oを通る補助線を1本引いて証明します。AO=BO=CO=r(半径)なので、二等辺三角形と三角形の内角の和が180度という性質を使っていけばよいことになります。最後に、直線ACが直線BOに交わるか、直線BCが直線AOに交わるか、いずれかの場合を見ておけば、すべての場合を考えた事になります。その場合も補助線は円と交わる所までCOを通る直線を引けば証明できます。

 「円周角の定理」の証明自体は検索すれば出てきますので、ここではSVGの方の表示実験に止めます。「円周角の定理」はユークリッド幾何学の話ですから、ガウスが発見した双曲幾何学など非ユークリッド幾何学では成立しません。そもそも非ユークリッド幾何学は、「平行線が交わらない」という公理を持たないので、同公理と必要十分な関係にある「平行線の錯角は等しい」も成立しないし、平行線公理から導かれる「三角形の内角の和は180度」という定理も成立しません。

O A B C

 SVGの参考文献は、wikipediaの「Scalable Vector Graphics」の外部リンク「SVG実習マニュアル」がとても分かりやすくて良いと思います。SVGの座標は、左上が原点(0,0)というのに最初戸惑いました。このサイトは、文章やタグは秀丸で書いてますが、SVGは、linux時代に使ったgnuplotが対応しているようで、今度、これで実験したいと思ってます。

 上記の記述内容と合わなくなるかもしれませんが、HTML5版に改めました。

 参考までに下記にソースを表示しておきます。

<svg width="10cm" height="10cm" viewBox="0 0 150 150">
	<circle cx="70" cy="70" r="50" fill="#00FF66" stroke="#0000FF" />
		<line x1="25" y1="93" x2="70" y2="70" stroke="#000000" />
		<line x1="70" y1="70" x2="93" y2="115" stroke="#000000" />

	<path d="M 25,93 L 90,25" stroke="#000000" />
	<path d="M 90,25 L 93,115" stroke="#000000" />
<g style="stroke: #990099; font-size: 8px">
	<text x="70" y="70">O</text>
	<text x="20" y="105">A</text>
	<text x="98" y="120">B</text>
	<text x="85" y="20">C</text>
</g>
</svg>
Kazari

Valid HTML5