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

~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, `cy@p ◎値 `length-percentage$t ◎初 `0^v ◎適 `circle$e, `ellipse$e 要素 ◎継 されない ◎百 順に,現在の~SVG表示域の[ 横幅, 縦幅 ]を基準にする(`単位$secを見よ) ◎ refer to the width of the current SVG viewport (see Units) ◎算 絶対~長さ/百分率 ◎ア 算出d値の型による ◎表終

[ `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 ◎値 `length-percentage$t ◎初 `0^v ◎適 `circle$e 要素 ◎継 されない ◎百 現在の~SVG表示域の`正規化-済み対角線長さ$を基準にする ◎ refer to the normalized diagonal of the current SVG viewport (see Units) ◎算 絶対~長さ/百分率 ◎ア 算出d値の型による ◎表終

`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 ◎値 `length-percentage$t | `auto^v ◎初 `auto^v ◎適 `ellipse$e, `rect$e 要素 ◎継 されない ◎百 順に,現在の~SVG表示域の[ 横幅, 縦幅 ]を基準にする(`単位$secを見よ) ◎ refer to the width of the current SVG viewport (see Units) ◎算 絶対~長さ/百分率 ◎ア 算出d値の型による ◎表終

[ `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 ◎値 `length-percentage$t ◎初 `0^v ◎適 `svg$e, `rect$e, `image$e, `foreignObject$e 要素 ◎継 されない ◎百 順に,現在の~SVG表示域の[ 横幅, 縦幅 ]を基準にする(`単位$secを見よ) ◎ refer to the width of the current SVG viewport (see Units) ◎算 絶対~長さ/百分率 ◎ア 算出d値の型による ◎表終

[ `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^p, `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 は: ◎ ↓