3章座標系
SVGの世界は無限のキャンバスです。この章では、そのキャンバスのどの部分にあなたが関心を持っているか、その領域の大きさはどれくらいか、その領域内で点の位置をどのように特定すべきか、などをビューアープログラムに指示する方法について説明します。
3.1 ビューポート
SVG文書で使おうとしているキャンバスの領域のことを、ビューポート（viewport）と呼びます。ビューポートのサイズは、<svg>要素のwidth属性とheight属性を使って設定します。それぞれの属性の値は数値だけでもよく、その場合はピクセル数で表された値と見なされます。これは、「ユーザー座標で指定された」と表現されます。このほかにwidthやheightの値を、次のいずれかの単位識別子が付いた数値として指定することもできます。
em- デフォルトフォントのフォントサイズ（通常は、テキスト行の高さと同じになります）
ex- 小文字のxの高さ
px- ピクセル（CSS2をサポートするグラフィックスでは、1インチにつき96ピクセルです）
pt- ポイント（1インチの1/72）
pc- パイカ（1インチの1/6）
cm- センチメートル
mm- ミリメートル
in- インチ
SVGのビューポート宣言の例を示します。
<svg width="200" height="150"><svg width="200px" height="150px">- どちらも、幅が200ピクセル、高さが150ピクセルの領域を指定します。
<svg width="2cm" height="3cm">- 幅が2センチメートル、高さが3センチメートルの領域を指定します。
<svg width="2cm" height="36pt">- 一般的ではありませんが、このように単位を混ぜることもできます。この要素は、幅が2センチメートル、高さが36ポイントの領域を指定します。 ...
Get SVGエッセンシャルズ 第2版 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
