第7章: ジオメトリプロパティ

SVGのスタイリングプロパティに加えて、SVGはジオメトリプロパティも定義しています。ジオメトリプロパティは、グラフィックス要素の‘circle’、 ‘ellipse’、‘rect’、‘image’、‘foreignObject’ そして ‘svg’要素の位置や寸法を記述します。

7.1. 水平方向の中心座標: ‘cx’ プロパティ

cxプロパティは要素の位置の水平方向の中心座標を記述します。

7.2. 垂直方向の中心座標: ‘cy’ プロパティ

cyプロパティは要素の位置の垂直方向の中心座標を記述します。

7.3. 半径: ‘r’ プロパティ

rプロパティは‘circle’ 要素の半径を記述します。

rプロパティが負の値の場合、不正な値として扱われます。

7.4. 水平方向の半径: ‘rx’ プロパティ

rxプロパティは‘ellipse’要素の水平方向の半径と、‘rect’要素の曲線半径を記述します。 ‘rx’の算出値がautoの場合、実際の半径はryで使用される絶対長さと等しくなり、円弧を作成します。 ‘rx’と‘ry’のどちらも算出値がautoの場合、実際の値は0になります。

値の計算方法に関わらず、‘rect’の‘rx’の使用値は、その形状のwidthの使用値の50%を超えません。

autoの挙動はSVG 2で新たに追加されたもので、‘ellipse’において、‘rect’でrxが指定されなかった場合の挙動と一致します。

rxプロパティが負の値の場合、不正な値として扱われます。

7.5. 垂直方向の半径: ‘ry’ プロパティ

ryプロパティは‘ellipse’要素の垂直方向の半径と、‘rect’要素の垂直方向の曲線半径を記述します。 ‘ry’の算出値がautoの場合、実際の半径はrxで使用される絶対長さと等しくなり、円弧を作成します。 ‘rx’と‘ry’のどちらも算出値がautoの場合、実際の値は0になります。

値の計算方法に関わらず、‘rect’の‘ry’の使用値は、その形状のheightの使用値の50%を超えません。

autoの挙動はSVG 2で新たに追加されたもので、‘ellipse’において、‘rect’でryが指定されなかった場合の挙動と一致します。

ryプロパティが負の値の場合、不正な値として扱われます。

7.6. 水平方向の座標: ‘x’ プロパティ

xプロパティは要素の位置の水平方向の座標を記述します。

7.7. 垂直方向の座標: ‘y’ プロパティ

yプロパティは要素の位置の垂直方向の座標を記述します。

7.8. サイズ指定プロパティ: ‘width’ および ‘height’ プロパティの効果

CSS 2.1仕様のwidthおよびheightの定義を参照してください。

CSSのwidthおよびheightプロパティは、 一部のSVG要素のサイズ指定に使用されます。具体的には、‘rect’、‘svg’、‘image’、‘foreignObject’のサイズ指定に使われます。 これらすべての要素は‘width’および‘height’のプレゼンテーション属性を持ちます。 また、HTML名前空間から埋め込まれた要素のレイアウトにも使用されます。

widthの使用値は、 max-widthや min-widthプロパティの値により制約されることがあります。 heightの使用値も、 max-heightや min-heightプロパティの値により制約されることがあります。

auto値が‘svg’要素のwidthおよびheightに指定された場合は100%として扱われます。

auto値が‘image’要素のwidthおよびheightに指定された場合は、参照画像の本来の寸法やアスペクト比からCSSのデフォルトサイズアルゴリズムに従って計算されます。

SVG 2で新規追加。SVGで埋め込まれる画像は本来のサイズで自動サイズ化したり、固定の高さや幅にアスペクト比でスケーリングできるようになりました。これはHTMLで埋め込む画像の動作と一致します。

auto値が他の要素のwidthおよびheightに指定された場合は0として扱われます。

つまり、例えば‘foreignObject’ オブジェクト要素では、autoを使うと中身に合わせてサイズが縮まることはありません。