~SVGは、~style付け~propの他にも，各種 `幾何~prop@ を定義する。 幾何~propは、 次に挙げる要素の［ 位置, 寸法 ］を述べる ⇒＃ `~graphics要素$, `circle$e, `ellipse$e, `rect$e, `image$e, `foreignObject$e, `svg$e ◎ Beside SVG's styling properties, SVG also defines geometry properties. Geometry properties describe the position and dimension of the graphics elements ‘circle’, ‘ellipse’, ‘rect’, ‘image’, ‘foreignObject’ and the ‘svg’ element.
7.1. 中心~座標： `cx^p, `cy^p ~prop
［ `cx$p ／ `cx$p ］~propは、 要素の中心の［ 横方向 ／ 縦方向 ］座標を述べる。
◎ Name: cx Value: <length-percentage> Initial: 0 Applies to: ‘circle’ and ‘ellipse’ elements Inherited: no Percentages: refer to the width of the current SVG viewport (see Units) Media: visual Computed value: an absolute length or percentage Animation type: by computed value ◎ The cx property describes the horizontal center coordinate of the position of the element. ◎ 7.2. Vertical center coordinate: The ‘cy’ property ◎ Name: cy Value: <length-percentage> Initial: 0 Applies to: ‘circle’ and ‘ellipse’ Inherited: no Percentages: refer to the height of the current SVG viewport (see Units) Media: visual Computed value: absolute length or percentage Animatable: yes ◎ The cy property describes the vertical center coordinate of the position of the element.7.2. 半径： `r^p ~prop
`r$p ~propは、 `circle$e 要素の半径を述べる。 ◎ The r property describes the radius of the ‘circle’ element.
`r$p に対する負な値は、 `無効な値$であり，`無視する$モノトスル。 ◎ A negative value for r is invalid and must be ignored.
7.3. 横方向, 縦方向の半径： `rx^p, `ry^p ~prop
［ `rx$p ／ `ry$p ］~propは、 `ellipse$e 要素に対しては，その［ 横方向 ／ 縦方向 ］半径を述べる。 また、 `rect$e 要素に対しては，四隅の曲線の［ 横方向 ／ 縦方向 ］半径を述べる。 ［ `rx^p, `ry^p ］のうち片方の算出d値が `auto^v になる場合、 その使用~半径は他方に利用される絶対~長さに等しくなり，真円な弧を作成する。 ［ `rx^p, `ry^p ］とも算出d値は `auto^v になる場合、 使用~値は両者とも 0 になるとする。 ◎ The rx property describes the horizontal radius of the ‘ellipse’ element and the curve radius of the ‘rect’ element. When the computed value of ‘rx’ is auto, the used radius is equal to the absolute length used for ry, creating a circular arc. If both ‘rx’ and ‘ry’ have a computed value of auto, the used value is 0.
値がどう計算されようが、 `rect$e 用の［ `rx^p ／ `ry^p ］の使用~値は，同じ図形の［ `width$p ／ `height$p ］の使用~値の 50% を超えることは決してない。 ◎ Regardless of how the value is calculated, the used value of ‘rx’ for a ‘rect’ is never more than 50% of the used value of width for the same shape.
注記： `ellipse$e に対する `auto^v の挙動は、 ~SVG 2 にて新たに~~導入された。 それは、［ `rx$p, `ry$p ］どちらかが指定されないときの `rect$e 要素の挙動に合致する。 ◎ The auto behavior is new in SVG 2 for ‘ellipse’, matching the behavior for ‘rect’ elements when rx was not specified.
［ `rx$p ／ `ry$p ］に対する負な値は、 `無効な値$であり，`無視する$モノトスル。 ◎ A negative value for rx is invalid and must be ignored. A negative value for rx must be treated as an illegal value. ◎ 7.5. Vertical radius: The ‘ry’ property ◎ Name: ry Value: <length-percentage> | auto Initial: auto Applies to: ‘ellipse’, ‘rect’ Inherited: no Percentages: refer to the height of the current SVG viewport (see Units) Media: visual Computed value: absolute length or percentage Animatable: yes ◎ The ry property describes the vertical radius of the ‘ellipse’ element and the vertical curve radius of the ‘rect’ element. When the computed value of ‘ry’ is auto, the used radius is equal to the absolute length used for rx, creating a circular arc. If both ‘rx’ and ‘ry’ have a computed value of auto, the used value is 0. ◎ Regardless of how the value is calculated, the used value of ‘ry’ for a ‘rect’ is never more than 50% of the used value of height for the same shape. ◎ The auto behavior is new in SVG 2 for ‘ellipse’, matching the behavior for ‘rect’ elements when ry was not specified. ◎ A negative value for ry is invalid and must be ignored.
7.4. 座標： `x^p, `y^p ~prop
［ `x$p ／ `y$p ］~propは、 要素の位置の［ 横方向 ／ 縦方向 ］座標を述べる。
◎ Name: x Value: <length-percentage> Initial: 0 Applies to: ‘svg’, ‘rect’, ‘image’, ‘foreignObject’ elements Inherited: no Percentages: refer to the width of the current SVG viewport (see Units) Media: visual Computed value: an absolute length or percentage Animation type: by computed value ◎ The x property describes the horizontal coordinate of the position of the element. ◎ 7.7. Vertical coordinate: The ‘y’ property Name: y Value: <length-percentage> Initial: 0 Applies to: ‘svg’, ‘rect’, ‘image’, ‘foreignObject’ Inherited: no Percentages: refer to the height of the current SVG viewport (see Units) Media: visual Computed value: absolute length or percentage Animatable: yes ◎ The y property describes the vertical coordinate of the position of the element.7.5. ~sizing~prop： `width^p, `height^p ~propの効果
注記： `width＠~CSS2J#propdef-width$p, `height＠~CSS2J#propdef-height$p の定義は、 ~CSS 2.1仕様を見よ。 ◎ See the CSS 2.1 specification for the definitions of width and height.
~CSS［ `width$p, `height$p ］~propは、 一部の~SVG要素 — 特定的には、 `rect$e, `image$e, `foreignObject$e, `最も外縁な~svg要素$ — を~sizeするために利用される。 これらの要素には、［ `width^a, `height^a ］呈示~属性も有る。 これらの~propは、 ~HTML名前空間に属する埋込d要素を~lay-outするためにも利用される。 ◎ The CSS width and height properties are used for sizing some SVG elements. Specifically, they are used to size ‘rect’, ‘image’, ‘foreignObject’, and the outermost ‘svg’ element. All of these elements have ‘width’ and ‘height’ presentation attributes. The properties are also used for laying out embedded elements from the HTML namespace.
注記： 他の~SVG要素 — `use$e 要素, `symbol$e 要素, 入子にされた `svg$e 要素など — にも、［ `width^a ／ `height^a ］属性は有るが，それらを~CSS~propとしては受容しない。 これらの要素に対しては、［ 横幅／縦幅 ］は，~XML属性として指定しなければナラナイ — 同じ名前を伴う~CSS~propは、 無視される。 ◎ Other SVG elements, such as nested ‘svg’ elements, the ‘use’ element, and the ‘symbol’ element, also have ‘width’ and ‘height’ attributes, but do not accept them as CSS properties. On these elements, the width and height must be specified as XML attributes; CSS properties with the same names are ignored.
`width$p の使用~値は、［ `min-width$p, `min-width$p ］~propの値により拘束され得る。 `height$p の使用~値は、［ `min-height$p, `min-height$p ］~propの値により拘束され得る。 ◎ The used value of width may be constrained by the value of the max-width and min-width properties. The used value of height may be constrained by the value of the max-height and min-height properties.
［ `width$p ／ `height$p ］用の値 `auto^v がどう扱われるは、 以下に要約される：
- `svg$e 要素においては ⇒ `100%^v として。
- `image$e 要素においては ⇒ ~CSSの`既定の~sizing~algo$に則って，参照先~画像の`生来な寸法$から計算される。
- 他の要素においては ⇒ `0^v として。
注記： ~SVG 2 にて新たに~~導入された。 ~SVG内に埋込まれた画像は，今や、 自動的にその`生来な~size$で示したり，その`生来な縦横比$に則って固定的な［ 縦幅, 横幅 ］どちらかに拡縮できる。 これは、~HTMLに埋込まれた画像の挙動に合致する。 ◎ New in SVG 2. Images embedded in SVG can now be auto-sized to the intrinsic size, or scaled to a fixed height or width according to the intrinsic aspect ratio. This matches the behavior of embedded images in HTML.
注記： したがって、 例えば `foreignObject$e ~obj要素に `auto^v が利用されても， その内容が収まるよう縮短されることはない。 ◎ This means that, for example, a ‘foreignObject’ object element will not shrink-wrap to its contents if auto is used.