7. 幾何プロパティ — Geometry Properties

7.1. 中心~座標： `cx^p, `cy^p ~prop

［ `cx$p ／ `cx$p ］~propは、 要素の中心の［ 横方向 ／ 縦方向 ］座標を述べる。 ◎ 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は、 要素の位置の［ 横方向 ／ 縦方向 ］座標を述べる。 ◎ 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, `svg$e, `image$e, `foreignObject$e — を~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’, ‘svg’, ‘image’ and ‘foreignObject’. All of these elements have ‘width’ and ‘height’ presentation attributes. The properties are also used for laying out embedded elements from the HTML namespace.

`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% として扱われる。 ◎ The value auto for width and height on the ‘svg’ element is treated as 100%.

• `image$e 要素~上では、 ~CSSの`既定の~sizing~algo$に則って，参照先~画像の`生来な寸法$から計算される。 ◎ The value auto for width and height on the ‘image’ element is calculated from the referenced image's intrinsic dimensions and aspect ratio, according to the CSS default sizing algorithm.

  注記： ~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.

• 他の要素~上では、 0 に扱われる。 ◎ The value auto for width and height on other elements is treated as 0.

  注記： したがって、 例えば `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.