基本形状 — SVG 2

在数学上，这些形状元素等同于一个 ‘path’ 元素，该元素将构造相同的形状。基本形状可以被描边、填充，并用作裁剪路径。所有适用于 ‘path’ 元素的属性也适用于基本形状。

每个形状的等效路径和计算描边的算法在下面的形状部分中定义。

10.2. ‘rect’ 元素

‘rect’ 元素定义了一个与当前用户坐标系统对齐的矩形。通过设置非零值的 rx 和 ry 几何属性，可以实现圆角矩形。

属性 x 和 y 坐标分别表示矩形的左边和上边，在当前用户坐标系统中。

属性 width 和 height 定义矩形的整体宽度和高度。对于任一属性的负值都是不合法的，必须被视为解析错误。如果任一维度的计算值为零，则禁用该元素的渲染。

对于圆角矩形，属性 rx 和 ry 的计算值定义了用于圆化矩形角落的椭圆弧的 x 轴和 y 轴半径。弧始终在水平和垂直轴上对称；要创建一个具有不均匀圆角的矩形，请使用 ‘path’ 显式定义形状。对于任一属性的负值都是不合法的，必须被视为解析错误。如果任一维度的计算值为零，或两者的计算值为 auto，则结果是没有圆角的矩形。

x 轴和 y 轴圆角半径的使用值可能会通过其他维度隐式确定（使用 auto 值），并且也受到限制，以确保矩形的直线段长度永远不会为负。rx 和 ry 的使用值根据计算值通过以下步骤确定：

在数学上，‘rect’ 元素被映射到等效的 ‘path’ 元素，如下所示，在为用户坐标系统生成绝对使用值 x、y、width、height、 rx 和 ry 之后，针对每个等效的几何属性，遵循上述规则和单位中的规则：

示例 rect01 显示了一个具有锐角的矩形。‘rect’ 元素填充为黄色并以海军蓝描边。

示例 rect02 显示了两个圆角矩形。rx 指定如何圆化矩形的角。请注意，由于未为 ry 属性指定值，使用的值将源自 rx 属性。

10.3. ‘circle’ 元素

在数学上，‘circle’ 元素映射到一个等效的 ‘path’ 元素，该元素由四个椭圆弧段组成，每段覆盖圆的四分之一。路径从半径的“3点钟”位置开始，并以顺时针方向进行（在任何变换之前）。弧命令的 rx 和 ry 参数都等于 r 属性的使用值，在转换为本地用户单位后，而 x-axis-rotation、 large-arc-flag、和 sweep-flag 都设置为零。坐标计算如下，其中 cx、cy 和 r 是等效属性的使用值，转换为用户单位：

示例 circle01 包含一个 ‘circle’ 元素，该元素填充为红色并用蓝色描边。

10.4. ‘ellipse’ 元素

‘ellipse’ 元素定义了一个与当前用户坐标系统对齐的椭圆，基于一个中心点和两个半径。

rx 和 ry 属性定义了椭圆的 x 轴和 y 轴半径。这两个属性的负值是非法的，必须作为解析错误被忽略。任一维度的计算值为零或两个维度的计算值为 auto，会禁用该元素的渲染。

任一 rx 或 ry 的 auto 值会被转换为使用值，遵循上述矩形的规则（但不基于宽度或高度进行任何夹紧）。实际上，auto 值创建了一个圆形，其半径由仅在一个维度中表达的值定义；这允许创建一个半径在以下方面定义的圆：

新增于 SVG 2。 auto 值用于 rx 和 ry 是为了允许对这两个属性进行一致的解析，适用于椭圆和矩形。之前，如果未指定 rx 或 ry，椭圆将不会渲染。

从数学上讲，‘ellipse’ 元素被映射到一个等效的 ‘path’ 元素，由四个椭圆弧段组成，每个覆盖椭圆的四分之一。路径从半径的 "3 点钟" 位置开始，顺时针方向进行（在任何变换之前）。弧命令的 rx 和 ry 参数是转换为局部用户单位后的等效属性的使用值，而 x-axis-rotation、large-arc-flag 和 sweep-flag 都设置为零。坐标的计算如下，其中 cx、cy、rx 和 ry 是转换为用户单位的等效属性的使用值：

示例 ellipse01 下面指定了在由 ‘viewBox’ 属性和 transform 属性在 ‘svg’ 元素上的用户坐标系统中两个椭圆的坐标。两个椭圆都使用零的默认值作为 cx 和 cy 属性（椭圆的中心）。第二个椭圆被旋转。

10.5. The ‘line’ element

The ‘line’ element defines a line segment that starts at one point and ends at another.

名称	值	初始值	可动画
x1， y1	<length-percentage> \| <number>	0	是

名称	值	初始值	可动画
x2， y2	<length-percentage> \| <number>	0	是

未来的规范可能会将‘x1’、‘y1’、‘x2’和‘y2’属性转换为几何属性。目前，它们只能通过元素属性指定，而不能使用 CSS。

从数学上讲，‘line’ 元素可以映射到等效的‘path’ 元素，具体如下：在根据单位转换坐标到用户坐标系统用户单位后生成值x1、y1、x2和y2：

由于‘line’元素是单一线条，因此在几何上是一维的，它们没有内部；因此，‘line’元素从不被填充（参见填充属性）。

示例 line01 下面指定了五条线在由‘viewBox’ 属性在‘svg’元素上建立的用户坐标系统中的坐标。这些线有不同的粗细。

10.6. ‘polyline’ 元素

‘‘polyline’ 元素定义了一组连接的直线段。通常，‘‘polyline’ 元素定义开放形状。

名称	值	初始值	可动画
points	<points>	(none)	是

未来的规范可能将 ‘points’ 属性转换为几何属性。目前只能通过元素属性指定，而不能通过 CSS 指定。

从数学上讲，‘polyline’ 元素可以映射到等效的 ‘path’ 元素，如下所示：

示例 polyline01 下指定了用户坐标系统中由 ‘viewBox’ 属性在 ‘svg’ 元素上建立的polyline。

10.7. ‘polygon’ 元素

‘polygon’ 元素定义了一个封闭的形状，由一组连接的直线段组成。

名称	值	初始值	可动画
points	<points>	(无)	是

未来的规范可能将 ‘points’ 属性转换为几何属性。目前只能通过元素属性指定，而不能通过 CSS。

从数学上讲，‘polygon’ 元素可以映射到等效的 ‘path’ 元素，如下所示：

示例 polygon01 下方指定了两个多边形（一个星形和一个六边形）在由 ‘viewBox’ 属性设定的用户坐标系统中，该属性位于 ‘svg’ 元素上。

10.8. DOM 接口

10.8.1. 接口 SVGRectElement

一个 SVGRectElement 对象表示 DOM 中的 ‘rect’ 元素。

[Exposed=Window]
interface SVGRectElement : SVGGeometryElement {
  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;
  [SameObject] readonly attribute SVGAnimatedLength rx;
  [SameObject] readonly attribute SVGAnimatedLength ry;
};

这些 IDL 属性 x， y， width， height， rx 和 ry 反映了 x， y， width， height， rx 和 ry 属性及其对应的呈现属性。

10.8.2. 接口 SVGCircleElement

一个 SVGCircleElement 对象表示 DOM 中的 ‘circle’ 元素。

[Exposed=Window]
interface SVGCircleElement : SVGGeometryElement {
  [SameObject] readonly attribute SVGAnimatedLength cx;
  [SameObject] readonly attribute SVGAnimatedLength cy;
  [SameObject] readonly attribute SVGAnimatedLength r;
};

这些 IDL 属性 cx， cy 和 r 反映了 cx， cy 和 y 属性及其对应的呈现属性。

10.8.3. 接口 SVGEllipseElement

一个 SVGEllipseElement 对象表示 DOM 中的 ‘ellipse’ 元素。

[Exposed=Window]
interface SVGEllipseElement : SVGGeometryElement {
  [SameObject] readonly attribute SVGAnimatedLength cx;
  [SameObject] readonly attribute SVGAnimatedLength cy;
  [SameObject] readonly attribute SVGAnimatedLength rx;
  [SameObject] readonly attribute SVGAnimatedLength ry;
};

这些 IDL 属性 cx， cy， rx 和 ry 反映了 cx， cy， rx 和 ry 属性及其对应的呈现属性。

10.8.4. 接口 SVGLineElement

SVGLineElement 接口对应于 ‘line’ 元素。

[Exposed=Window]
interface SVGLineElement : SVGGeometryElement {
  [SameObject] readonly attribute SVGAnimatedLength x1;
  [SameObject] readonly attribute SVGAnimatedLength y1;
  [SameObject] readonly attribute SVGAnimatedLength x2;
  [SameObject] readonly attribute SVGAnimatedLength y2;
};

这些 x1、y1、x2 和 y2 IDL 属性反映了 ‘x1’、‘y1’、‘x2’ 和 ‘y2’ 内容属性，分别。

10.8.5. Mixin SVGAnimatedPoints

SVGAnimatedPoints 接口用于反映 ‘points’ 属性在 ‘polygon’ 或 ‘polyline’ 元素上。它混入到 SVGPolygonElement 和 SVGPolylineElement 接口中。

注意：在 SVG 1.1 SE 中，animatedPoints 属性表示当前动画值。在这个版本的 SVG 中，它只是 points 的别名。

interface mixin SVGAnimatedPoints {
  [SameObject] readonly attribute SVGPointList points;
  [SameObject] readonly attribute SVGPointList animatedPoints;
};

这些 points 和 animatedPoints IDL 属性表示反映属性的当前非动画值。当获取 points 或 animatedPoints 时，返回一个 SVGPointList 对象，该对象反映反映属性的基本值。

10.8.6. 接口 SVGPointList

SVGPointList 接口是一个列表接口，其元素是DOMPoint 对象。一个SVGPointList 对象表示一个点的列表。

[Exposed=Window]
  interface SVGPointList {
  
    readonly attribute unsigned long length;
    readonly attribute unsigned long numberOfItems;
  
    void clear();
    DOMPoint initialize(DOMPoint newItem);
    getter DOMPoint getItem(unsigned long index);
    DOMPoint insertItemBefore(DOMPoint newItem, unsigned long index);
    DOMPoint replaceItem(DOMPoint newItem, unsigned long index);
    DOMPoint removeItem(unsigned long index);
    DOMPoint appendItem(DOMPoint newItem);
    setter void (unsigned long index, DOMPoint newItem);
  };

所有SVGPointList 接口成员的行为在列表接口中定义。

该规范对DOMPoint 对象的行为施加了额外要求，这些要求超出了几何接口规范中描述的内容，以便它们可以用于反映‘points’属性。

每个DOMPoint 对象在三种模式中操作。它可以：

反映一个可动画属性的基础值（通过points成员的方法暴露在 SVGAnimatedPoints中），
表示给定‘svg’元素的当前平移 （通过currentTranslate 成员暴露在SVGSVGElement中），或
被分离，这是使用其构造函数或createSVGPoint创建的DOMPoint对象的情况。

一个DOMPoint对象可以与特定元素关联。关联元素用于确定如果对象反映一个属性，哪个元素的内容属性需要更新。除非另有描述，DOMPoint对象不会与任何元素关联。

一个DOMPoint 对象可以被指定为只读，这意味着尝试修改对象将导致抛出异常。当分配给只读DOMPoint的x, y, w或 z IDL 属性时，必须抛出NoModificationAllowedError，而不是更新内部坐标值。

注意，这仅适用于可读写的DOMPoint 接口；DOMPointReadOnly 接口在不用于反映 ‘points’ 属性时，若尝试修改则会自动抛出异常。

在给可写的DOMPoint的 x, y, w 或 z IDL 属性分配时，在更新内部坐标值后，执行以下步骤：

如果DOMPoint 反映了基值的某个反射属性的元素，则使用反映属性基值的SVGPointList重新序列化该反射属性。
否则，如果DOMPoint 表示某个元素的当前平移，且该元素是最外层 svg 元素，则：
1. 让 [a b c d e f] 为表示文档的放大和平移变换的 2x3 矩阵。
2. 让x和y分别为DOMPoint对象的 x 和 y 坐标。
3. 将文档的放大和平移变换设置为 [a 0 0 d x y]。

10.8.7. 接口 SVGPolylineElement

SVGPolylineElement 对象表示 DOM 中的一个‘多线段’ 元素。

[Exposed=Window]
interface SVGPolylineElement : SVGGeometryElement {
};

SVGPolylineElement 包含 SVGAnimatedPoints;

10.8.8. 接口 SVGPolygonElement

SVGPolygonElement 对象表示 DOM 中的一个‘多边形’元素。

[Exposed=Window]
interface SVGPolygonElement : SVGGeometryElement {
};

SVGPolygonElement 包含 SVGAnimatedPoints;

第10章：基本形状

10.1. 介绍和定义