数学

第4章．SVG part.2 HTML5版

　前回のHTML5版を書いてみましたが、path の使い方が分からなかったので、lineで書き直しました。

　Opera 12.11では、表示できていますが、他のものでは、IE9.0で見えることしか確認していません。

　大きさを1.5倍にしてみました。Scalable だから、書き換えるのは簡単です。width と height の値を変えればいい。

　いろいろと調整した所、W3C の文法チェックにかけると、Passed, 1 warning(s)になりました。まだW3Cのサイトが実験段階なので、警告が必ず1つつくようです。 文法ミスがないというこを保証しているわけではないということを言いたいらしい。

　同じことは、HTML5で実装された canvas でもできるようですが、Java script による面倒なソースを書かないといけないので、SVGの方が簡単です。

O A B C D 小矢 大矢 内接円 正方形

　SVG のxhtml版については、第2章で紹介した「SVG実習マニュアル」が更新を続けており、とても分かりやすくて良いと思いますが、HTML5化については情報が少ないので、参考までにソースを以下に表示しておきます。

<svg width="15cm" height="15cm" viewBox="0 0 150 150">
	<circle cx="70" cy="70" r="50" fill="#00FF66" stroke="#0000FF" />
	<circle cx="50" cy="60" r="20" fill="#00CC66" stroke="#FFFFFF" />
		<line x1="30" y1="40" x2="110" y2="40" stroke="#000000" />
		<line x1="110" y1="40" x2="110" y2="100" stroke="#000000" />
		<line x1="110" y1="100" x2="30" y2="100" stroke="#000000" />
		<line x1="30" y1="100" x2="30" y2="40" stroke="#000000" />
		<line x1="110" y1="40" x2="30" y2="100" stroke="#000000" />
		<line x1="30" y1="70" x2="20" y2="70" stroke="#000000" />
		<line x1="70" y1="40" x2="70" y2="20" stroke="#000000" />
		<line x1="75.714" y1="65.714" x2="110" y2="65.714" stroke="#000000" />
		<line x1="75.714" y1="65.714" x2="75.714" y2="100" stroke="#000000" />
	<g style="stroke: #990077; font-size: 7px">
			<text x="65" y="75">O</text>
			<text x="20" y="105">A</text>
			<text x="115" y="40">B</text>
			<text x="20" y="40">C</text>
			<text x="115" y="105">D</text>
			<text x="20" y="70">小矢</text>
			<text x="70" y="30">大矢</text>
			<text x="40" y="60">内接円</text>
			<text x="80" y="80">正方形</text>
	</g>
</svg>

　第2章のHTML5版化の際には、path の使い方が分かったので、path と line を混在させました。<svg>以降は、閉じるまで半角空白なども駄目のようで、見やすくしたければ、TABを使う必要があるようです。

Kazari

Valid HTML5