第七章：几何属性

除了 SVG 的样式属性，SVG 还定义了几何属性。几何属性描述了图形元素的位置和尺寸 ‘circle’、 ‘ellipse’、‘rect’、‘image’、‘foreignObject’ 和 ‘svg’ 元素。

7.1. 水平中心坐标：‘cx’ 属性

‘cx’ 属性描述了元素的水平中心坐标。

‘cy’ 属性描述了元素的垂直中心坐标。

‘r’ 属性描述了 ‘circle’ 元素的半径。

‘r’ 的负值必须被视为非法值。

‘rx’ 属性描述了 ‘ellipse’ 元素的水平半径和 ‘rect’ 元素的曲率半径。当‘rx’的计算值为auto时，使用的半径等于用于 ry 的绝对长度，形成一个圆弧。如果‘rx’和‘ry’的计算值均为auto，则使用值为 0。

无论如何计算该值，对于 ‘rect’ 元素，‘rx’ 的使用值永远不会超过相同形状的 width 的使用值的 50%。

auto 行为在 SVG 2 中为 ‘ellipse’ 引入，以匹配 ‘rect’ 元素在未指定 rx 时的行为。

‘rx’ 的负值必须被视为非法值。

‘ry’ 属性描述了 ‘ellipse’ 元素的垂直半径和 ‘rect’ 元素的垂直曲率半径。当‘ry’的计算值为auto时，使用的半径等于用于 rx 的绝对长度，形成一个圆弧。如果‘rx’和‘ry’的计算值均为auto，则使用值为 0。

无论如何计算该值，对于 ‘rect’ 元素，‘ry’ 的使用值永远不会超过相同形状的 height 的使用值的 50%。

auto 行为在 SVG 2 中为 ‘ellipse’ 引入，以匹配 ‘rect’ 元素在未指定 ry 时的行为。

‘ry’ 的负值必须被视为非法值。

名称：	x
值：	<length-percentage>
初始值：	0
适用于：	‘svg’, ‘rect’, ‘image’, ‘foreignObject’
继承：	否
百分比：	参考当前 SVG 视口的大小（见单位）
媒体：	视觉
计算值：	绝对长度或百分比
可动画：	是

‘x’ 属性描述元素位置的水平坐标。

名称：	y
值：	<length-percentage>
初始值：	0
适用于：	‘svg’, ‘rect’, ‘image’, ‘foreignObject’
继承：	否
百分比：	参考当前 SVG 视口的大小（见单位）
媒体：	视觉
计算值：	绝对长度或百分比
可动画：	是

‘y’ 属性描述元素位置的垂直坐标。

有关 width 和 height 定义，请参阅 CSS 2.1 规范。

CSS width 和 height 属性用于某些 SVG 元素的尺寸设置。具体而言，它们用于设置 ‘rect’、‘svg’、‘image’ 和 ‘foreignObject’。所有这些元素都有 ‘width’ 和 ‘height’ 展示属性。这些属性还用于布局来自 HTML 命名空间的嵌入元素。

用于的 width 值可能会受到 max-width 和 min-width 属性的限制。用于的 height 值可能会受到 max-height 和 min-height 属性的限制。

在 ‘svg’ 元素上，width 和 height 的值 auto 被视为 100%。

在 ‘image’ 元素上，width 和 height 的值 auto 根据引用图像的固有尺寸和纵横比进行计算，遵循 CSS 默认尺寸算法。

在 SVG 2 中，新功能：嵌入在 SVG 中的图像现在可以自动调整为固有大小，或根据固有纵横比缩放到固定高度或宽度。这与 HTML 中嵌入图像的行为一致。

在其他元素上，width 和 height 的值 auto 被视为 0。

这意味着，例如，‘foreignObject’ 对象元素在使用 auto 时不会根据其内容进行收缩。