精图规范1.0----7 坐标系, 变换和单位Coordinate Systems, Transformations and Units
来源：互联网 发布：软件模块化设计方法 编辑：程序博客网 时间：2024/05/16 08:00
previous next contents elements attributes properties index
04 September 2001
7 坐标系, 变换和单位Coordinate Systems, Transformations and Units
内容 Contents
- 7.1 引言 Introduction
- 7.2 初始视口 The initial viewport
- 7.3 初始坐标系 The initial coordinate system
- 7.4 坐标系变换 Coordinate system transformations
- 7.5 嵌套变换 Nested transformations
- 7.6 变换性质 The transform attribute
- 7.7 视口性质 The viewBox attribute
- 7.8 preserveAspectRatio性质 The preserveAspectRatio attribute
- 7.9 建立新的视口 Establishing a new viewport
- 7.10 单位 Units
- 7.11 对象边框单位 Object bounding box units
- 7.12 文档对象模型接口 DOM interfaces
7.1 引言 Introduction
对于所有媒体, 精图画布描述 "在此空间上渲染精图内容." 对空间的每一维画布是无限的, 可是渲染出现在画布的相对有限的一个矩形区域内. 这一有限的矩形区域被称为精图的视口. 对于可视的媒体而言 [CSS2-VISUAL],精图视口是一块供浏览的区域在这里用户可以看到精图的内容. For all media, the SVGcanvas describes "the space where the SVG content isrendered." The canvas is infinite for each dimension of the space, butrendering occurs relative to a finite rectangular region of the canvas. Thisfinite rectangular region is called the SVG viewport.For visual media [CSS2-VISUAL],the SVG viewport is the viewing area where the user sees the SVG content.
精图视口的尺寸(即, 它的宽度和高度) 是由在精图文档片段和它的上级(真实的或隐含的)之间的协商过程(参见 建立初始视口的尺寸)所决定的 . 一旦完成此协商过程, 给精图用户代理提供下列信息: Thesize of the SVG viewport (i.e., its width and height) is determined by anegotiation process (seeEstablishing the size of theinitial viewport) between the SVG document fragment and its parent (real orimplicit). Once that negotiation process is completed, the SVG user agent isprovided the following information:
- 一个数量(通常为整数) 它表示此视口以"像素"为单位的宽度 a number (usually an integer) that represents the width in "pixels" of the viewport
- 一个数量(通常为整数) 它表示此视口以"像素"为单位的高度 a number (usually an integer) that represents the height in "pixels" of the viewport
- (十分希望但不必要求) 一个实数值用来表示实际世界的单位比如毫米的"像素"尺寸(即, 一个 在 [CSS2 长度]中定义的px单位) (highly desirable but not required) a real number value that indicates the size in real world units, such as millimeters, of a "pixel" (i.e., a px unit as defined in [CSS2 lengths])
利用上述信息, 精图用户代理确定此视口, 一个初始视口的坐标系和一个初始的用户坐标系使得这两个坐标系是一致的. 建立两个坐标系使得其原点与视口的原点匹配 (对于根视口而言, 视口原点在左上角), 并且在初始坐标系中的一个单位等于此视口中的一个"像素". (参见 初始坐标系.)视口坐标系也被称为视口空间用户坐标系也被称为用户空间. Using the above information, the SVG user agent determinesthe viewport, an initial viewportcoordinate system and an initial user coordinatesystem such that the two coordinates systems are identical. Bothcoordinates systems are established such that the origin matches the origin ofthe viewport (for the root viewport, the viewport origin is at the top/leftcorner), and one unit in the initial coordinate system equals one"pixel" in the viewport. (SeeInitialcoordinate system.) The viewport coordinate system is also called viewport space and the user coordinate system is alsocalled user space.
精图中的长度被指定为: Lengths in SVG can be specified as:
- (如果不提供单位标识符) 在用户空间中值 -- 例如, "15" (if no unit identifier is provided) values in user space -- for example, "15"
- (如果提供单位标识符) 长度表示为一个绝对的或相对的单位度量-- 例如, "15mm" 或"5em" (if a unit identifier is provided) a length expressed as an absolute or relative unit measure -- for example, "15mm" or "5em"
所支持的长度单位标识符是:em, ex, px, pt, pc, cm, mm, in, 和 百分号. The supportedlength unit identifiers are: em, ex, px, pt, pc, cm, mm, in, and percentages.
一个新的用户空间 (即, 一个新的当前坐标系) 能够在精图片段通过指定变换矩阵或简单的变换操作如旋转歪斜缩放和平移的任何地方被建立. 通过 坐标系变换建立新的用户空间是针对2D图形的基本操作和表示控制图形对象的尺寸, 位置, 旋转和歪斜的普通方法. A new user space (i.e., a new current coordinate system) can be established atany place within an SVG document fragment by specifying transformationsin the form of transformation matrices or simpletransformation operations such as rotation, skewing, scaling and translation.Establishing new user spaces viacoordinatesystem transformations are fundamental operations to 2D graphics andrepresent the usual method of controlling the size, position, rotation and skewof graphic objects.
新的视口也能被建立. 通过 建立一个新的视口, 你可以重新定义百分号单位的意义并且提供一个新的引用矩形以便将一个图形"适合"于一个特定矩形区域. ("适合" 意味着给定的图形以这种方式进行变换使得它的在用户空间的边框严格与给定的视口的各边对齐.) New viewports also can be established. Byestablishing a new viewport, you canredefine the meaning of percentages units and provide a new reference rectanglefor "fitting" a graphic into a particular rectangular area.("Fit" means that a given graphic is transformed in such a way thatits bounding box in user space aligns exactly with the edges of a givenviewport.)
7.2 初始视口 The initial viewport
精图用户代理与它的上级用户代理进行协商确定精图用户代理对文档进行渲染的视口. 在有些情况下, 精图内容将被嵌入(通过引用或内联)在一个包容文档中. 这一包含文档也许包括性质, 属性和/或其它参数 (显式的或隐含的) 它们指定或提供精图内容的视口的尺寸的提示.精图内容本身有时通过最外面的 'svg' 元素的width和heightXML性质提供关于合适的视口区域的信息 . 协商过程根据容器文档以及精图本身提供的信息选择视口的位置和尺寸. The SVG user agent negotiates with its parent user agent to determine theviewport into which the SVG user agent can render the document. In some circumstances,SVG content will be embedded (by reference orinline) within a containing document. This containing document mightinclude attributes, properties and/or other parameters (explicit or implicit)which specify or provide hints about the dimensions of the viewport for the SVGcontent. SVG content itself optionally can provide information about theappropriate viewport region for the content via the widthand height XML attributes on the outermost 'svg' element. The negotiation process uses anyinformation provided by the containing document and the SVG content itself tochoose the viewport location and size.
最外面的 'svg' 元素的宽度性质建立视口的宽度, 除非遇到下列条件: The width attribute on the outermost 'svg' element establishes the viewport's width,unless the following conditions are met:
- 精图内容是一个分开存储的资源它通过引用来嵌入 (比如作为在[XHTML]中的'object' 元素 ), 或精图内容内联嵌入容器文档中; the SVG content is a separately stored resource that is embedded by reference (such as the 'object' element in [XHTML]), or the SVG content is embedded inline within a containing document;
- 并且引用元素或包含文档使用CSS [CSS2] 或 XSL [XSL]进行样式化; and the referencing element or containing document is styled using CSS [CSS2] or XSL [XSL];
- 并且存在CSS-兼容的位置属性 [CSS2-POSN] 指定 在引用元素上 (例如, 'object' 元素) 或在包含文档的最外层的 'svg' 元素上 足以建立视口的宽度. and there are CSS-compatible positioning properties [CSS2-POSN] specified on the referencing element (e.g., the 'object' element) or on the containing document's outermost 'svg' element that are sufficient to establish the width of the viewport.
在这些条件下, 其位置属性建立视口的宽度. Under these conditions, the positioning properties establish the viewport'swidth.
类似地, 如果在引用元素上或在最外部的 'svg' 上指定位置属性 [CSS2-POSN]足以建立视口的高度, 那么这些位置属性建立视口的高度; 否则, 在最外部的 'svg' 上height 性质建立视口的高度. Similarly, if there are positioning properties [CSS2-POSN]specified on the referencing element or on the outermost 'svg' that are sufficient to establish the height ofthe viewport, then these positioning properties establish the viewport'sheight; otherwise, the height attribute on theoutermost 'svg' element establishes theviewport's height.
如果在最外部的 'svg' 上的width 或height 性质用用户单位表示(即, 不提供单位标识符), 那么假设其值等价于以"px"为单位的相同的数字 (参见单位). Ifthe width or heightattributes on the outermost 'svg' element arein user units(i.e., no unit identifier has been provided), then the value is assumed to beequivalent to the same number of "px" units (seeUnits).
在下面的例子中, 一个精图图形被内联嵌入在一个父XML文档中此文档使用CSS 布局规则进行格式化. 因为 在最外层的 'svg' 元素中不提供CSS 位置属性, width="100px"和 height="200px" 性质决定初始视口的尺寸: In thefollowing example, an SVG graphic is embedded inline within a parent XMLdocument which is formatted using CSS layout rules. Since CSS positioningproperties are not provided on the outermost 'svg'element, the width="100px" and height="200px" attributes determine the sizeof the initial viewport:
<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://some.url">
<!-- SVG graphic -->
<svg xmlns='http://www.w3.org/2000/svg'
width="100px" height="200px">
<path d="M100,100 Q200,400,300,100"/>
<!-- rest of SVG graphic would go here -->
</svg>
</parent>
精图文档片段的初始剪切路径按照在 初始剪切路径中描述的规则来建立. The initialclipping path for the SVG document fragment is established according to therules described inTheinitial clipping path.
7.3 初始坐标系 The initial coordinate system
对于最外层的 'svg' 元素, 精图用户代理决定一个初始的 视口坐标系 和一个初始的 用户坐标系使得两个坐标系是同一的. 两个坐标系的原点在视口的原点, 在初始坐标系中一个单位等于视口中的一个 "像素" (即, 在[CSS2长度]中定义的一个px 单位 ) . 在大多情况下, 比如单独的精图文档或嵌入(通过引用或内联)XML父文档中的精图文档片段而父文档的布局由 CSS [CSS2] 或XSL [XSL]决定, 初始视口坐标系 (并且因此初始坐标系) 其原点在视口左上角, 具有正向 x-轴指向右边, 正向y-轴指向朝下, 并且文本的渲染方向为"右上" , 这意味着排列图元使得罗马字符和亚洲文本的全尺寸的表意字符所对应的图元的顶边朝上而右边朝右. For the outermost'svg' element, the SVG user agent determines aninitial viewport coordinate system and an initial user coordinate system such that the two coordinatessystems are identical. The origin of both coordinate systems is at the originof the viewport, and one unit in the initial coordinate system equals one"pixel" (i.e., apx unit as defined in [CSS2 lengths])in the viewport. In most cases, such as stand-alone SVG documents or SVGdocument fragments embedded (by reference orinline) within XML parent documents where the parent's layout is determinedby CSS [CSS2] or XSL [XSL], the initial viewport coordinatesystem (and therefore the initial user coordinate system) has its origin at thetop/left of the viewport, with the positive x-axis pointing towards the right,the positive y-axis pointing down, and text rendered with an"upright" orientation, which means glyphs are oriented such thatRoman characters and full-size ideographic characters for Asian scripts havethe top edge of the corresponding glyphs oriented upwards and the right edge ofthe corresponding glyphs oriented to the right.
如果精图实现是支持使用CSS2兼容px单位对XML文档进行样式化的用户代理的一部分, 那么精图用户代理将得到在真实世界单位一个px单位的尺寸的初始值以便匹配用于其它XML样式操作的值; 否则, 如果用户代理从其环境中能够决定一个px单位的尺寸, 它将使用此值; 否则, 它将为一个px单位选择一个适当的尺寸. 在所有这些情况下, 一个px的尺寸必须与在 [CSS2 长度]中描述的规则一致. If theSVG implementation is part of a user agent which supports styling XML documentsusing CSS2-compatiblepx units, then the SVG user agent should get itsinitial value for the size of apx unit in real world units to matchthe value used for other XML styling operations; otherwise, if the user agentcan determine the size of apx unit from its environment, it shoulduse that value; otherwise, it should choose an appropriate size for onepxunit. In all cases, the size of a px must be in conformance with therules described in [CSS2 lengths].
下面例子InitialCoords显示初始坐标系的原点在左上角x轴指向右边 y轴指向朝下. 初始用户坐标系的一个用户单位等于父(隐式的或显式的) 用户代理的"像素". Example InitialCoords below shows that the initialcoordinate system has the origin at the top/left with the x-axis pointing tothe right and the y-axis pointing down. The initial user coordinate system hasone user unit equal to the parent (implicit or explicit) user agent's"pixel".
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300px" height="100px"
xmlns="http://www.w3.org/2000/svg">
<desc>Example InitialCoords - SVG's initial coordinate system</desc>
<g fill="none" stroke="black" stroke-width="3" >
<line x1="0" y1="1.5" x2="300" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="100" />
</g>
<g fill="red" stroke="none" >
<rect x="0" y="0" width="3" height="3" />
<rect x="297" y="0" width="3" height="3" />
<rect x="0" y="97" width="3" height="3" />
</g>
<g font-size="14" font-family="Verdana" >
<text x="10" y="20">(0,0)</text>
<text x="240" y="20">(300,0)</text>
<text x="10" y="90">(0,100)</text>
</g>
</svg>
Example InitialCoords
View thisexample as SVG (SVG-enabled browsers only)
7.4 坐标系变换 Coordinate system transformations
一个新的用户空间 (即, 一个新的当前的坐标系) 可以通过指定 以 在 一个容器元素 或 图形元素上的transform 性质或 在一个'svg','symbol', 'marker', 'pattern' 和'view' 元素上的viewBox 性质的形式的变换来建立. transform 和viewBox 性质变换在 给定元素 (参见在同胞性质上的 transform 性质的效果和 e在同胞性质上 viewBox 性质的效果)和 所有后代的同胞性质上的用户空间坐标和长度. 变换可以是嵌套的, 在此时变换的效果是累积的. A new userspace (i.e., a new current coordinate system) can be established by specifying transformations in the form of atransform attribute on a container element orgraphics element or a viewBox attribute on an 'svg', 'symbol', 'marker', 'pattern' and the 'view' element. The transform and viewBox attributes transform user space coordinatesand lengths on sibling attributes on the given element (seeeffectof the transform attribute on sibling attributesand effectof the viewBox attribute on sibling attributes)and all of its descendants. Transformations can be nested, in which case theeffect of the transformations are cumulative.
下面例子 OrigCoordSys 说明一个无变换的文档. 文本字符串在初始坐标系中指定 . Example OrigCoordSys below shows a document withouttransformations. The text string is specified in theinitialcoordinate system.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400px" height="150px"
xmlns="http://www.w3.org/2000/svg">
<desc>Example OrigCoordSys - Simple transformations: original picture</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system -->
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>
<g>
<text x="30" y="30" font-size="20" font-family="Verdana" >
ABC (orig coord system)
</text>
</g>
</svg>
Example OrigCoordSys
View thisexample as SVG (SVG-enabled browsers only)
例子 NewCoordSys 在下面第三个'g' 元素通过指定transform="translate(50,50)"建立一个新的用户坐标系. 新的用户坐标系的原点位于原来的坐标系 (50,50)处. 这一变换的结果是在新的坐标系中的坐标 (30,30) 映照到原坐标系的坐标 (80,80) (即, 通过在X上平移50单位在 Y上平移50单位所得到的坐标). Example NewCoordSys establishes a new user coordinatesystem by specifying transform="translate(50,50)"on the third 'g' element below. The new usercoordinate system has its origin at location (50,50) in the original coordinatesystem. The result of this transformation is that the coordinate (30,30) in thenew user coordinate system gets mapped to coordinate (80,80) in the originalcoordinate system (i.e., the coordinates have been translated by 50 units in Xand 50 units in Y).
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400px" height="150px"
xmlns="http://www.w3.org/2000/svg">
<desc>Example NewCoordSys - New user coordinate system</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system -->
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>
<g>
<text x="30" y="30" font-size="20" font-family="Verdana" >
ABC (orig coord system)
</text>
</g>
<!-- Establish a new coordinate system, which is
shifted (i.e., translated) from the initial coordinate
system by 50 user units along each axis. -->
<g transform="translate(50,50)">
<g fill="none" stroke="red" stroke-width="3" >
<!-- Draw lines of length 50 user units along
the axes of the new coordinate system -->
<line x1="0" y1="0" x2="50" y2="0" stroke="red" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="30" y="30" font-size="20" font-family="Verdana" >
ABC (translated coord system)
</text>
</g>
</svg>
Example NewCoordSys
View thisexample as SVG (SVG-enabled browsers only)
例子 RotateScale 解释简单的 旋转 和缩放 变换. 此例子定义了两个新的坐标系: Example RotateScale illustrates simplerotateandscale transformations. The example defines two newcoordinate systems:
- 其中一个是先在X上平移50单位在 Y上平移30单位然后旋转30度的结果 one which is the result of a translation by 50 units in X and 30 units in Y, followed by a rotation of 30 degrees
- 而另一个是先在X上平移200单位在 Y上平移40单位然后放大1.5倍的结果 another which is the result of a translation by 200 units in X and 40 units in Y, followed by a scale transformation of 1.5.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400px" height="120px"
xmlns="http://www.w3.org/2000/svg">
<desc>Example RotateScale - Rotate and scale transforms</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system -->
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="120" />
</g>
<!-- Establish a new coordinate system whose origin is at (50,30)
in the initial coord. system and which is rotated by 30 degrees. -->
<g transform="translate(50,30)">
<g transform="rotate(30)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
ABC (rotate)
</text>
</g>
</g>
<!-- Establish a new coordinate system whose origin is at (200,40)
in the initial coord. system and which is scaled by 1.5. -->
<g transform="translate(200,40)">
<g transform="scale(1.5)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
ABC (scale)
</text>
</g>
</g>
</svg>
Example RotateScale
View thisexample as SVG (SVG-enabled browsers only)
例子 Skew 定义两个坐标系这两个坐标系相对于原来的坐标系的原点是歪斜的 . Example Skew defines two coordinate systems which areskewedrelative to the origin coordinate system.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400px" height="120px"
xmlns="http://www.w3.org/2000/svg">
<desc>Example Skew - Show effects of skewX and skewY</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system -->
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="120" />
</g>
<!-- Establish a new coordinate system whose origin is at (30,30)
in the initial coord. system and which is skewed in X by 30 degrees. -->
<g transform="translate(30,30)">
<g transform="skewX(30)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
ABC (skewX)
</text>
</g>
</g>
<!-- Establish a new coordinate system whose origin is at (200,30)
in the initial coord. system and which is skewed in Y by 30 degrees. -->
<g transform="translate(200,30)">
<g transform="skewY(30)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
ABC (skewY)
</text>
</g>
</g>
</svg>
Example Skew
View this exampleas SVG (SVG-enabled browsers only)
从数学上来说, 所有变换可以表示为如下形式的 3x3 变换矩阵: Mathematically, all transformations can be represented as 3x3 transformation matrices of the following form:
因为只有六个值在上述3x3矩阵中起作用, 故一个变换也可以用一个向量表示: [a b c d ef]. Since only six values are used in the above 3x3 matrix, atransformation matrix is also expressed as a vector:[a b c d e f].
变换映照坐标和长度从一个新的坐标系到一个先前的坐标系: Transformations map coordinates and lengths from a newcoordinate system into a previous coordinate system:
简单的变换可以表示成如下形式的矩阵: Simple transformations are represented in matrix formas follows:
- 平移等价于矩阵 Translation is equivalent to the matrix
或[1 0 0 1 tx ty], 这里tx和ty分别为到平移坐标X和Y的距离. or[1 0 0 1 tx ty], wheretx and ty are the distances to translate coordinates inX andY, respectively. - 缩放等价于矩阵 Scaling is equivalent to the matrix
或 [sx 0 0 sy 0 0]. 在新坐标系中X 和 Y 方向的一个单位分别等于在原坐标系中sx和sy单位. or[sx 0 0 sy 0 0]. One unit in theX and Y directions in the new coordinate system equalssx andsy units in the previous coordinate system, respectively. - 旋转等价于矩阵 Rotation about the origin is equivalent to the matrix
或 [cos(a) sin(a) -sin(a) cos(a) 0 0], 具有将原坐标系的轴旋转角度a的效果. or[cos(a) sin(a) -sin(a) cos(a) 0 0], which has the effect of rotating the coordinate system axes by anglea. - 沿x的歪斜等价于矩阵 A skew transformation along the x-axis is equivalent to the matrix
或 [1 0 tan(a) 1 0 0], 具有将坐标X歪斜角度 a的效果. or [1 0 tan(a) 1 0 0], which has the effect of skewing X coordinates by anglea. - 沿y的歪斜等价于矩阵 A skew transformation along the y-axis is equivalent to the matrix
或 [1 tan(a) 0 1 0 0], 具有将坐标Y歪斜角度 a的效果. or [1 tan(a) 0 1 0 0], which has the effect of skewing Y coordinates by anglea.
7.5 嵌套变换 Nested transformations
变换可以进行任意级的嵌套. 嵌套变换的效果为后乘(即, 连接) 随后的变换矩阵到以前定义的变换: Transformations can be nested to any level. The effectof nested transformations is to post-multiply (i.e., concatenate) thesubsequent transformation matrices onto previously defined transformations:
对于每个给定的元素, 定义在此给定元素和它的所有祖先 和包括 建立当前视口的元素 (通常, 'svg' 元素往往是给定元素的最直接的祖先) 上的所有变换的堆积被称为 当前变换矩阵 或 CTM. 于是CTM表示当前用户坐标到视口坐标的映照: For each given element, theaccumulation of all transformations that have been defined on the given elementand all of its ancestors up to and including the element that established thecurrent viewport (usually, the 'svg' element which is the most immediateancestor to the given element) is called the currenttransformation matrix or CTM. The CTM thusrepresents the mapping of current user coordinates to viewport coordinates:
例子 Nested 解释了嵌套变换. Example Nested illustrates nested transformations.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400px" height="150px"
xmlns="http://www.w3.org/2000/svg">
<desc>Example Nested - Nested transformations</desc>
<g fill="none" stroke="black" stroke-width="3" >
<!-- Draw the axes of the original coordinate system -->
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>
<!-- First, a translate -->
<g transform="translate(50,90)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="16" font-family="Verdana" >
....Translate(1)
</text>
<!-- Second, a rotate -->
<g transform="rotate(-45)">
<g fill="none" stroke="green" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="16" font-family="Verdana" >
....Rotate(2)
</text>
<!-- Third, another translate -->
<g transform="translate(130,160)">
<g fill="none" stroke="blue" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="16" font-family="Verdana" >
....Translate(3)
</text>
</g>
</g>
</g>
</svg>
Example Nested
View this exampleas SVG (SVG-enabled browsers only)
在上面这个例子中, 在第三个嵌套变换(即, transform="translate(130,160)")中CTM 由三个如下的变换的堆积构成: In the example above, the CTM within the third nestedtransformation (i.e., the transform="translate(130,160)")consists of the concatenation of the three transformations, as follows:
7.6 transform性质 The transform attribute
transform 性质的值是一个 <变换-列表>, 它定义为变换定义的列表, 它按照一定的顺序提供. 单个变换定义之间由空格和/或逗号分隔. 变换定义的可用类型包括: The valueof the transform attribute is a<transform-list>, which is defined as a list of transform definitions,which are applied in the order provided. The individual transform definitionsare separated by whitespace and/or a comma. The available types of transformdefinitions include:
- matrix(<a> <b> <c> <d> <e> <f>), 它指定按六个值变换矩阵的形式的一种变换. matrix(a,b,c,d,e,f) 等价于使用变换矩阵[a b c d e f]. matrix(<a> <b> <c> <d> <e> <f>), which specifies a transformation in the form of atransformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix[a b c d e f].
- translate(<tx> [<ty>]), 它由tx和ty指定一个 平移 . 如果不提供 <ty> , 则假设它为零. translate(<tx> [<ty>]), which specifies atranslation bytx and ty. If <ty> is not provided, it is assumed to be zero.
- scale(<sx> [<sy>]), 它由sx和sy指定一个缩放 操作 .如果不提供<sy> , 则假设它等于<sx>. scale(<sx> [<sy>]), which specifies a scale operation by sx and sy. If <sy> is not provided, it is assumed to be equal to<sx>.
- rotate(<rotate-angle> [<cx> <cy>]), 它由在给定的点处和<rotate-angle>角度指定一个 旋转 . rotate(<rotate-angle> [<cx> <cy>]), which specifies a rotation by <rotate-angle> degrees about a given point.
如果不提供可选参数 <cx> 和 <cy> , 此旋转在当前用户坐标系的原点处进行. 此操作对应于矩阵 [cos(a) sin(a) -sin(a) cos(a) 0 0]. If optional parameters <cx> and <cy> are not supplied, the rotate is about the origin of the current user coordinate system. The operation corresponds to the matrix [cos(a) sin(a) -sin(a) cos(a) 0 0].
如果提供可选参数 <cx> 和 <cy> , 此旋转在点(<cx>, <cy>)处进行. 此操作表示下列说明等价物: translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>). If optional parameters <cx> and <cy> are supplied, the rotate is about the point (<cx>, <cy>). The operation represents the equivalent of the following specification: translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>).
- skewX(<skew-angle>), 它指定一个 沿着x轴的歪斜变换. skewX(<skew-angle>), which specifies a skew transformation along the x-axis.
- skewY(<skew-angle>), 它指定一个 沿着y轴的歪斜变换. skewY(<skew-angle>), which specifies a skew transformation along the y-axis.
所有数字值是一个实 <数>. All numeric values are real <number>s.
如果提供变换的列表, 那么其最后的效果为 好像被指定每个变换分别按顺序提供. 例如, If a list of transforms is provided, then the net effect is as if eachtransform had been specified separately in the order provided. For example,
<g transform="translate(-10,-20) scale(2) rotate(45) translate(5,10)">
<!-- graphics elements go here -->
</g>
在功效上等价于: is functionally equivalent to:
<g transform="translate(-10,-20)">
<g transform="scale(2)">
<g transform="rotate(45)">
<g transform="translate(5,10)">
<!-- graphics elements go here -->
</g>
</g>
</g>
</g>
在处理此元素提供的任何其它坐标和长度值之前transform 性质被用于一个元素 . 在此元素内 The transform attribute is applied to an element beforeprocessing any other coordinate or length values supplied for that element. Inthe element
<rect x="10" y="10" width="20" height="20" transform="scale(2)"/>
x, y, width 和 height 的值在当前坐标系被统统放大transform 性质2倍之后进行处理 . 性质 x, y, width和 height (以及任何其它性质或属性) 按新的用户坐标系的值来对待, 而不是作为以前的用户坐标系的值来对待. 于是, 上面的'rect'元素在功效上等价于: the x, y, width and height values are processed after the current coordinatesystem has been scaled uniformly by a factor of 2 by the transformattribute. Attributes x, y, width and height (and any other attributes orproperties) are treated as values in the new user coordinate system, not theprevious user coordinate system. Thus, the above 'rect'element is functionally equivalent to:
<g transform="scale(2)">
<rect x="10" y="10" width="20" height="20"/>
</g>
下面为 transform 性质的值的 Backus-Naur 范式 (BNF) . 使用下列记号: The following isthe Backus-Naur Form (BNF) for values for the transformattribute. The following notation is used:
- *: 0 or more
- +: 1 or more
- ?: 0 or 1
- (): grouping
- |: separates alternatives
- double quotes surround literals
transform-list:
wsp* transforms? wsp*
transforms:
transform
| transform comma-wsp+ transforms
transform:
matrix
| translate
| scale
| rotate
| skewX
| skewY
matrix:
"matrix" wsp* "(" wsp*number comma-wsp
number comma-wsp
number comma-wsp
number comma-wsp
number comma-wsp
number wsp* ")"
translate:
"translate" wsp* "(" wsp* number ( comma-wsp number )? wsp* ")"scale:
"scale" wsp* "(" wsp* number ( comma-wsp number )? wsp* ")"rotate:
"rotate" wsp* "(" wsp* number ( comma-wsp number comma-wsp number )? wsp* ")"skewX:
"skewX" wsp* "(" wsp* number wsp* ")"skewY:
"skewY" wsp* "(" wsp* number wsp* ")"number:
sign? integer-constant
| sign? floating-point-constant
comma-wsp:
(wsp+ comma? wsp*) | (comma wsp*)
comma:
","
integer-constant:
digit-sequence
floating-point-constant:
fractional-constant exponent?
| digit-sequence exponent
fractional-constant:
digit-sequence? "." digit-sequence
| digit-sequence "."
exponent:
( "e" | "E" ) sign? digit-sequence
sign:
"+" | "-"
digit-sequence:
digit
| digit digit-sequence
digit:
"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
wsp:
(#x20 | #x9 | #xD | #xA)
对于 transform 性质: For the transform attribute:
Animatable:yes.
参见 'animateTransform' 元素关于动画变换方面的信息. See the 'animateTransform' element for information onanimating transformations.
7.7 viewBox性质 The viewBoxattribute
常常期望指定一套图形伸展以适合一个特定的容器元素. viewBox 性质提供这种能力. It is oftendesirable to specify that a given set of graphics stretch to fit a particularcontainer element. The viewBox attribute providesthis capability.
可以建立一个新的视口(参见 建立视口的元素)的所有元素加上 'marker', 'pattern' 和'view' 元素有性质viewBox. viewBox 性质的值是四种数 <min-x>,<min-y>, <width>和 <height>的列表, 它们通过空格和/或逗号分隔, 它指定一个在用户空间上的矩形此矩形被映照到由给定元素所建立的视口的边界,特别要考虑性质preserveAspectRatio. 如果指定, 一个额外的变换将用到给定元素的所有后裔以达到特定的效果. All elements that establish a new viewport(seeelementsthat establish viewports), plus the 'marker', 'pattern' and 'view' elements have attribute viewBox. The value of the viewBoxattribute is a list of four numbers <min-x>,<min-y>, <width>and <height>, separated by whitespaceand/or a comma, which specify a rectangle in user space which should be mappedto the bounds of the viewport established by the given element, taking intoaccount attribute preserveAspectRatio. If specified, an additionaltransformation is applied to all descendants of the given element to achievethe specified effect.
如果 <width> 或 <height> 为负值则是一种错误 (参见 错误处理).一个零值则不对此元素进行渲染. A negative value for <width> or <height> is an error (seeErrorprocessing). A value of zero disables rendering of the element.
例子 ViewBox 解释在最外层的'svg' 元素上的viewBox性质的使用以便指定精图内容进行伸展适合此视口的边界. Example ViewBox illustrates the use of the viewBox attribute on the outermost'svg' element to specify that the SVG contentshould stretch to fit bounds of the viewport.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300px" height="200px"
viewBox="0 0 1500 1000" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg">
<desc>Example ViewBox - uses the viewBox
attribute to automatically create an initial user coordinate
system which causes the graphic to scale to fit into the
viewport no matter what size the viewport is.</desc>
<!-- This rectangle goes from (0,0) to (1500,1000) in user space.
Because of the viewBox attribute above,
the rectangle will end up filling the entire area
reserved for the SVG content. -->
<rect x="0" y="0" width="1500" height="1000"
fill="yellow" stroke="blue" stroke-width="12" />
<!-- A large, red triangle -->
<path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/>
<!-- A text string that spans most of the viewport -->
<text x="100" y="600" font-size="200" font-family="Verdana" >
Stretch to fit
</text>
</svg>
Rendered into
viewport with
width=300px,
height=200px
Rendered into
viewport with
width=150px,
height=200px
Example ViewBox
View thisexample as SVG (SVG-enabled browsers only)
viewBox 性质的效果是用户代理自动使用附加的变换矩阵映照用户空间的矩形到指定的区域的边界(常常为视口). 为了达到例子左边的效果, 视口的区域为300 乘 200 像素, 用户代理需要自动插入一个变换此变换将 X 和Y都缩小0.2. 效果等价于有一个尺寸为300px 乘 200px的视口并且在文档中的追加变换如下: The effect of the viewBox attribute is that theuser agent automatically supplies the appropriate transformation matrix to mapthe specified rectangle in user space to the bounds of a designated region(often, the viewport). To achieve the effect of the example on the left, withviewport dimensions of 300 by 200 pixels, the user agent needs to automaticallyinsert a transformation which scales both X and Y by 0.2. The effect isequivalent to having a viewport of size 300px by 200px and the followingsupplemental transformation in the document, as follows:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300px" height="200px"
xmlns="http://www.w3.org/2000/svg">
<g transform="scale(0.2)">
<!-- Rest of document goes here -->
</g>
</svg>
为了达到例子右边的效果, 视口的区域为150 乘 200 像素, 用户代理需要自动插入一个变换此变换将 X缩小0.1 和Y缩小0.2. 效果等价于有一个尺寸为150px乘 200px的视口并且在文档中的追加变换如下: To achievethe effect of the example on the right, with viewport dimensions of 150 by 200pixels, the user agent needs to automatically insert a transformation whichscales X by 0.1 and Y by 0.2. The effect is equivalent to having a viewport ofsize 150px by 200px and the following supplemental transformation in thedocument, as follows:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="150px" height="200px"
xmlns="http://www.w3.org/2000/svg">
<g transform="scale(0.1 0.2)">
<!-- Rest of document goes here -->
</g>
</svg>
(注记: 在有些情况下用户代理需要在一个缩放 变换之外提供一个平移 变换 . 例如, 在最外层的'svg'上, 如果viewBox性质指定 <min-x>或<min-y>的值不为零那么需要一个平移变换 .) (Note: in somecases the user agent will need to supply atranslatetransformation in addition to ascale transformation. Forexample, on an outermost'svg', atranslatetransformation will be needed if the viewBoxattributes specifies values other than zero for <min-x>or <min-y>.)
不像transform 性质 (参见在同胞性质上的transform性质的效果), 因为一个viewBox所创建的自动变换不影响在具有viewBox性质的元素上的x, y, width和height性质 (或者在'marker' 元素的情况下, markerWidth 和markerHeight 性质). 于是, 上面的例子显示了一个 'svg' 元素 具有性质width, height 和 viewBox, 此 width 和 height 性质表示的坐标系的值在应用viewBox变换之前就已经存在. 另一方面, 对于transform 性质来说, 它会为所有其它性质和后裔元素建立一个新的坐标系. Unlike the transform attribute (see effectof the transform on sibling attributes),the automatic transformation that is created due to a viewBoxdoes not affect the x, y,width and heightattributes (or in the case of the'marker' element, the markerWidth and markerHeight attributes) on the element with the viewBox attribute. Thus, in the example above which showsan 'svg' element which has attributes width, height and viewBox, the width and height attributes represent values in the coordinatesystem that exists before the viewBoxtransformation is applied. On the other hand, like thetransform attribute, it does establish a new coordinatesystem for all other attributes and for descendant elements.
对于 viewBox 性质: For the viewBoxattribute:
Animatable:yes.
7.8 preserveAspectRatio 性质 The preserveAspectRatioattribute
在某些情况下, 典型的情况是使用 viewBox 性质, 期望对图形进行伸展以便不均匀地适合占据整个视口. 在其它情况下, 期望进行均匀地缩放以便保留图形的纵横比. Insome cases, typically when using theviewBox attribute, it is desirable that the graphicsstretch to fit non-uniformly to take up the entire viewport. In other cases, itis desirable that uniform scaling be used for the purposes of preserving theaspect ratio of the graphics.
性质 preserveAspectRatio="<align> [<meetOrSlice>]", 它可以用于能够建立视口(参见 建立视口的元素)的所有元素加上'image', 'marker','pattern' 和'view' 元素, 表示是否强制进行均匀的缩放. Attribute preserveAspectRatio="<align>[<meetOrSlice>]", which is available for all elements thatestablish a new viewport (see elementsthat establish viewports), plus the 'image', 'marker', 'pattern' and 'view' elements, indicates whether or not toforce uniform scaling.
对于能够建立视口(参见 建立视口的元素)的所有元素加上'marker','pattern' 和'view' 元素而言, preserveAspectRatio 只有在同一元素上提供了viewBox 的值才会使用. 对于这些元素, 如果不提供性质 viewBox , 那么将忽略preserveAspectRatio . For elements that establish a new viewport (seeelementsthat establish viewports), plus the 'marker', 'pattern' and 'view' elements, preserveAspectRatioonly applies when a value has been provided forviewBox on the same element. For these elements, ifattributeviewBox is not provided, then preserveAspectRatiois ignored.
对于 'image' 元素而言, preserveAspectRatio 表示如何使引用的图像适合引用的矩形并且是否在当前用户坐标系中保留引用的图像的纵横比. For'image' elements, preserveAspectRatioindicates how referenced images should be fitted with respect to the referencerectangle and whether the aspect ratio of the referenced image should bepreserved with respect to the current user coordinate system.
<align> 参数表示是否强制进行均匀的缩放 并且, 如果是这样的话, 假如此 viewBox的纵横比不与此视口的纵横比不同时将使用对齐方法. <align> 参数必须为下列字符串之一 : The <align> parameter indicates whether to forceuniform scaling and, if so, the alignment method to use in case the aspectratio of theviewBox doesn't match the aspect ratio of the viewport.The <align> parameter must be one of thefollowing strings:
- none - 不进行均匀的缩放. 对给定元素的图形内容进行不均匀的缩放如果必要的话使得此元素的边框严格与视口矩形一致. none - Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.
(注意:如果 <align> 为 none, 那么忽略选项<meetOrSlice> 的值.) (Note: if <align> is none, then the optional <meetOrSlice> value is ignored.) - xMinYMin - 强制进行均匀的缩放. xMinYMin - Force uniform scaling.
将元素的viewBox 的 <min-x> 与视口的最小X值进行对正. Align the <min-x> of the element'sviewBox with the smallest X value of the viewport.
将元素的viewBox 的 <min-y> 与视口的最小 Y值进行对正. Align the <min-y> of the element'sviewBox with the smallest Y value of the viewport. - xMidYMin - 强制进行均匀的缩放. xMidYMin - Force uniform scaling.
将元素的viewBox 的中点X值 与视口的中点X值进行对正. Align the midpoint X value of the element'sviewBox with the midpoint X value of the viewport.
将元素的viewBox 的 <min-y> 与视口的最小 Y值进行对正. Align the <min-y> of the element'sviewBox with the smallest Y value of the viewport. - xMaxYMin - 强制进行均匀的缩放. xMaxYMin - Force uniform scaling.
将元素的viewBox 的<min-x>+<width> 与视口的最大X值进行对正. Align the <min-x>+<width> of the element'sviewBox with the maximum X value of the viewport.
将元素的viewBox 的 <min-y> 与视口的最小 Y值进行对正. Align the <min-y> of the element'sviewBox with the smallest Y value of the viewport. - xMinYMid - 强制进行均匀的缩放. xMinYMid - Force uniform scaling.
将元素的viewBox 的 <min-x> 与视口的最小X值进行对正. Align the <min-x> of the element'sviewBox with the smallest X value of the viewport.
将元素的viewBox 的中点Y值 与视口的中点Y值进行对正. Align the midpoint Y value of the element'sviewBox with the midpoint Y value of the viewport. - xMidYMid (缺省值) - 强制进行均匀的缩放. xMidYMid (the default) - Force uniform scaling.
将元素的viewBox 的中点 X值 与视口的中点 X值进行对正. Align the midpoint X value of the element'sviewBox with the midpoint X value of the viewport.
将元素的viewBox 的中点 Y值 与视口的中点 Y值进行对正. Align the midpoint Y value of the element'sviewBox with the midpoint Y value of the viewport. - xMaxYMid - 强制进行均匀的缩放. xMaxYMid - Force uniform scaling.
将元素的viewBox 的<min-x>+<width> 与视口的最大 X值进行对正. Align the <min-x>+<width> of the element'sviewBox with the maximum X value of the viewport.
将元素的viewBox 的中点 Y值 与视口的中点 Y值进行对正. Align the midpoint Y value of the element'sviewBox with the midpoint Y value of the viewport. - xMinYMax - 强制进行均匀的缩放. xMinYMax - Force uniform scaling.
将元素的viewBox 的 <min-x> 与视口的最小X值进行对正. Align the <min-x> of the element'sviewBox with the smallest X value of the viewport.
将元素的viewBox 的<min-y>+<height> 与视口的最大Y值进行对正. Align the <min-y>+<height> of the element'sviewBox with the maximum Y value of the viewport. - xMidYMax - 强制进行均匀的缩放. xMidYMax - Force uniform scaling.
将元素的viewBox 的中点 X值 与视口的中点 X值进行对正. Align the midpoint X value of the element'sviewBox with the midpoint X value of the viewport.
将元素的viewBox 的<min-y>+<height> 与视口的最大 Y值进行对正. Align the <min-y>+<height> of the element'sviewBox with the maximum Y value of the viewport. - xMaxYMax - 强制进行均匀的缩放. xMaxYMax - Force uniform scaling.
将元素的viewBox 的<min-x>+<width> 与视口的最大 X值进行对正. Align the <min-x>+<width> of the element'sviewBox with the maximum X value of the viewport.
将元素的viewBox 的<min-y>+<height> 与视口的最大 Y值进行对正. Align the <min-y>+<height> of the element'sviewBox with the maximum Y value of the viewport.
<meetOrSlice> 是可选的并且, 如果提供此参数时, 通过一个或多个空格与 <align> 值分隔并且必须为下列字符串之一: The <meetOrSlice>parameter is optional and, if provided, is separated from the <align> value by one or more spaces and then mustbe one of the following strings:
- meet (缺省) - 缩放图形使得: meet (the default) - Scale the graphic such that:
- 保留纵横比 aspect ratio is preserved
- 整个 viewBox 在视口内是可见的 the entireis visible within the viewport
- 尽可能将viewBox 放大, 直到遇到其它标准为止 theviewBox is scaled up as much as possible, while still meeting the other criteria
在这种情况下, 如果图形的纵横比与视口的纵横比不一致, 视口的某些部分将越过 viewBox的边界(即, 区域这里viewBox将画得比视口小). In this case, if the aspect ratio of thegraphic does not match the viewport, some of the viewport will extend beyondthe bounds of theviewBox (i.e., the area into which the viewBox will draw will be smaller than the viewport).
- slice - 缩放图形使得: slice - Scale the graphic such that:
- 保留纵横比 aspect ratio is preserved
- 整个视口被 viewBox 覆盖 the entire viewport is covered by theviewBox
- 尽可能将 viewBox 缩小, 直到遇到其它标准为止 the viewBox is scaled down as much as possible, while still meeting the other criteria
在这种情况下, 如果 viewBox 的纵横比与视口的纵横比不一致, viewBox 的某些部分将越过视口的边界(即, 区域这里 viewBox 将画得比视口大). In this case, if the aspect ratio of theviewBox does not match the viewport, some of theviewBox will extend beyond the bounds of the viewport(i.e., the area into which theviewBox will draw is larger than the viewport).
例子PreserveAspectRatio 解释在上的各种preserveAspectRatio选项 . 为了节省空间, 为三个重复的图形对象定义XML实体 , 包含微笑图示的矩形以及与目标视口有相同尺寸的两个矩形的轮廓 . 这个例子通过在最外层的'svg' 元素中嵌入'svg'子元素创建几个新的视口(参见建立一个新的视口). Example PreserveAspectRatio illustrates thevarious options on preserveAspectRatio. To savespace, XML entities have been defined for the three repeated graphic objects,the rectangle with the smile inside and the outlines of the two rectangleswhich have the same dimensions as the target viewports. The example createsseveral new viewports by including'svg' sub-elements embedded inside the outermost'svg' element (see Establishinga new viewport).
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
[ <!ENTITY Smile "
<rect x='.5' y='.5' width='29' height='39' fill='black' stroke='red'/>
<g transform='translate(0, 5)'>
<circle cx='15' cy='15' r='10' fill='yellow'/>
<circle cx='12' cy='12' r='1.5' fill='black'/>
<circle cx='17' cy='12' r='1.5' fill='black'/>
<path d='M 10 19 A 8 8 0 0 0 20 19' stroke='black' stroke-width='2'/>
</g>
">
<!ENTITY Viewport1 "<rect x='.5' y='.5' width='49' height='29'
fill='none' stroke='blue'/>">
<!ENTITY Viewport2 "<rect x='.5' y='.5' width='29' height='59'
fill='none' stroke='blue'/>">
]>
<svg width="450px" height="300px"
xmlns="http://www.w3.org/2000/svg">
<desc>Example PreserveAspectRatio - illustrates preserveAspectRatio attribute</desc>
<rect x="1" y="1" width="448" height="298"
fill="none" stroke="blue"/>
<g font-size="9">
<text x="10" y="30">SVG to fit</text>
<g transform="translate(20,40)">&Smile;</g>
<text x="10" y="110">Viewport 1</text>
<g transform="translate(10,120)">&Viewport1;</g>
<text x="10" y="180">Viewport 2</text>
<g transform="translate(20,190)">&Viewport2;</g>
<g id="meet-group-1" transform="translate(100, 60)">
<text x="0" y="-30">--------------- meet ---------------</text>
<g><text y="-10">xMin*</text>&Viewport1;
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
<g transform="translate(70,0)"><text y="-10">xMid*</text>&Viewport1;
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
<g transform="translate(0,70)"><text y="-10">xMax*</text>&Viewport1;
<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
</g>
<g id="meet-group-2" transform="translate(250, 60)">
<text x="0" y="-30">---------- meet ----------</text>
<g><text y="-10">*YMin</text>&Viewport2;
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
<g transform="translate(50, 0)"><text y="-10">*YMid</text>&Viewport2;
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
<g transform="translate(100, 0)"><text y="-10">*YMax</text>&Viewport2;
<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
</g>
<g id="slice-group-1" transform="translate(100, 220)">
<text x="0" y="-30">---------- slice ----------</text>
<g><text y="-10">xMin*</text>&Viewport2;
<svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
<g transform="translate(50,0)"><text y="-10">xMid*</text>&Viewport2;
<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
<g transform="translate(100,0)"><text y="-10">xMax*</text>&Viewport2;
<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
</g>
<g id="slice-group-2" transform="translate(250, 220)">
<text x="0" y="-30">--------------- slice ---------------</text>
<g><text y="-10">*YMin</text>&Viewport1;
<svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
<g transform="translate(70,0)"><text y="-10">*YMid</text>&Viewport1;
<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
<g transform="translate(140,0)"><text y="-10">*YMax</text>&Viewport1;
<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
</g>
</g>
</svg>
Example PreserveAspectRatio
Viewthis example as SVG (SVG-enabled browsers only)
对于 preserveAspectRatio 性质: For the preserveAspectRatio attribute:
Animatable:yes.
7.9 建立一个新的视口Establishing a new viewport
在对精图的任何点进行绘制时,你可以建立一个新的视口此视口所包含的图形通过在精图内容中包含一个'svg' 元素而得以绘制. 通过建立一个新的视口, 你可以隐式建立一个新的视口坐标系, 一个新的用户坐标系, 以及, 潜在地, 一个新的剪切路径 (参见'overflow' 属性的定义). 另外, 因为建立了一个新的视口相对于当前视口所定义的百分数单位具有新的意义 (参见 单位) Atany point in an SVG drawing, you can establish a new viewport into which allcontained graphics is drawn by including an 'svg'element inside SVG content. By establishing a new viewport, you also implicitlyestablish a new viewport coordinate system, a new user coordinate system, and,potentially, a new clipping path (see the definition of the'overflow' property). Additionally, there is a newmeaning for percentage units defined to be relative to the current viewportsince a new viewport has been established (seeUnits)
通过元素的x, y, width 和 height性质所定义新视口的边界建立此新的视口, 比如一个 'svg' 元素. 新的视口坐标系和新的用户坐标系原点都在 (x, y), 这里 x 和 y 表示建立视口的元素上对应性质的值. 新的视口坐标系和新的用户坐标系的方位对应于建立视口的元素的当前用户坐标系的方位. 新的视口坐标系和新的用户坐标系的单一单位与建立视口的元素的当前用户坐标系的单一单位具有相同的尺寸. The bounds of the new viewport are defined bythe x, y, width and height attributeson the element establishing the new viewport, such as an 'svg' element. Both the new viewport coordinatesystem and the new user coordinate system have their origins at (x, y), where x and y represent the valueof the corresponding attributes on the element establishing the viewport. Theorientation of the new viewport coordinate system and the new user coordinatesystem correspond to the orientation of the current user coordinate system forthe element establishing the viewport. A single unit in the new viewportcoordinate system and the new user coordinate system are the same size as asingle unit in the current user coordinate system for the element establishingthe viewport.
这里是一个例子: Here is an example:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="4in" height="3in"
xmlns="http://www.w3.org/2000/svg">
<desc>This SVG drawing embeds another one,
thus establishing a new viewport
</desc>
<!-- The following statement establishing a new viewport
and renders SVG drawing B into that viewport -->
<svg x="25%" y="25%" width="50%" height="50%">
<!-- drawing B goes here -->
</svg>
</svg>
关于创建新的视口的一个更广泛的例子, 参见 例子PreserveAspectRatio. For an extensive example of creatingnew viewports, seeExamplePreserveAspectRatio.
下列元素建立新的视口: The followingelements establish new viewports:
- 'svg' 元素 The'svg' element
- 一个 'symbol' 元素通过一个 'use'元素实例化时定义新的视口. A 'symbol' element define new viewports whenever they are instanced by a 'use' element.
- 一个 'image' 元素它引用一个精图文件将建立一个临时的新的视口因为被引用的资源的定义中包含一个 'svg'元素. An 'image' element that references an SVG file will result in the establishment of a temporary new viewport since the referenced resource by definition will have an'svg' element.
- 一个 'foreignObject' 元素创建一个新的视口用于渲染在此元素下的内容. A 'foreignObject' element creates a new viewport for rendering the content that is within the element.
一个新的视口是否也建立一个新的额外的剪切路径由建立新的视口的元素的'overflow' 属性的值来决定. 如果创建对应于新的视口的一个剪切路径, 剪切路径的几何由'clip'属性的值来确定. 也, 参见 比较剪切到视口与剪切到 viewBox. Whether a new viewport also establishes a new additional clipping path isdetermined by the value of the'overflow' property on the element that establishesthe new viewport. If a clipping path is created to correspond to the newviewport, the clipping path's geometry is determined by the value of the'clip' property. Also, see Clipto viewport vs. clip to viewBox.
7.10 单位 Units
在精图中的所有坐标和长度可以使用或不使用一个单位标识符来指定 . Allcoordinates and lengths in SVG can be specified with or without a unit identifier.
当一个坐标或长度值为一个不带单位标识符的数 (例如,"25")时, 那么假设给定的坐标或长度使用的是用户单位 (即, 在当前用户坐标系中的值). 例如: When a coordinate or length value is a number without a unit identifier (e.g.,"25"), then the given coordinate or length is assumed to be in userunits (i.e., a value in the current user coordinate system). For example:
<text style="font-size: 50">Text size is 50 user units</text>
反之, 一个坐标或长度值可以表示为一个带 单位标识符的数 (例如, "25cm" 或 "15em"). 在精图中的单位标识符列表与CSS中的单位标识符列表完全一致它们为 : em, ex, px, pt, pc, cm, mm, in 和百分数. 下面叙述如何处理各种单位标识符: Alternatively, a coordinate or length value canbe expressed as a number following by a unit identifier (e.g., "25cm" or "15em"). The list ofunit identifiers in SVG matches the list of unit identifiers in CSS: em, ex,px, pt, pc, cm, mm, in and percentages. The following describes how the variousunit identifiers are processed:
· 在CSS中, 单位标识符em 和 ex 分别相对于当前字体的 font-size 和x-height. As in CSS, theem and ex unitidentifiers are relative to the current font'sfont-size andx-height,respectively.
· 一 px 单位等于一用户单位. 于是, 长度 "5px" 与长度 "5"相同. One px unitis defined to be equal to one user unit. Thus, a length of "5px" isthe same as a length of "5".
注意在初始化的时候,在初始坐标系中的用户单位 等价于父辈环境中的一个px 单位记号. 于是, 在初始坐标系,因为用户坐标系严格与父坐标系相对齐, 并且因为常常父辈坐标系与设备的像素格对齐, "5px" 也许实际上映照到 5 个设备像素 . 可是, 如果由于使用transform 或viewBox性质存在任何坐标系变换, 因为"5px" 映照到 5 用户单位并且由于进行坐标系变换故得到一个改变了的用户坐标系,"5px"很可能不会映照到5 个设备像素. 结果在大多数环境中, "px" 单位不会映照到设备的像素格. Note that at initialization, a user unit in thetheinitial coordinate system is equivalenced to the parent environment'snotion of apx unit. Thus, in thetheinitial coordinate system, because the user coordinate system alignsexactly with the parent's coordinate system, and because often the parent'scoordinate system aligns with the device pixel grid, "5px" mightactually map to 5 devices pixels. However, if there are any coordinate systemtransformation due to the use of transform or viewBox attributes, because "5px" maps to 5user units and because the coordinate system transformations have resulted in arevised user coordinate system, "5px" likely will not map to 5 devicepixels. As a result, in most circumstances, "px" units will not mapto the device pixel grid.
· 来自CSS的其它绝对单位标识符 (即, pt, pc, cm, mm, in) 都被定义为一个px单位(按照以前的条款它被定义为等于一个用户单位)的适当倍数, basedon what the SVG user agent determines is the size of apx unit ???(可能从父辈处理者那里或者在初始化时的环境那里传来). 例如, 假设用户代理可以从其环境中确定 "1px" 对应 "0.2822222mm"(即., 90dpi). 那么, 对于精图内容的所有处理: The other absolute unit identifiers from CSS(i.e., pt, pc, cm, mm, in) are all defined as an appropriate multiple of onepxunit (which, according to the previous item, is defined to be equal to one userunit), based on what the SVG user agent determines is the size of apxunit (possibly passed from the parent processor or environment atinitialization time). For example, suppose that the user agent can determinefrom its environment that "1px" corresponds to "0.2822222mm" (i.e.,90dpi). Then, for all processing of SVG content:
- "1pt" 等于 "1.25px" (并且因此为 1.25 用户单位) "1pt" equals "1.25px" (and therefore 1.25 user units)
- "1pc" 等于 "15px" (并且因此为 15 用户单位) "1pc" equals "15px" (and therefore 15 user units)
- "1mm" 将为 "3.543307px" (3.543307 用户单位) "1mm" would be "3.543307px" (3.543307 user units)
- "1cm" 等于 "35.43307px" (并且因此为 35.43307 用户单位) "1cm" equals "35.43307px" (and therefore 35.43307 user units)
- "1in" 等于 "90px" (并且因此为 90 用户单位) "1in" equals "90px" (and therefore 90 user units)
注意使用px单位或者任何其它绝对单位标识符在不同的观看环境中可能产生不一致的视觉效果因为"1px" 的尺寸也许在不同的系统中映照到不同数目的用户单位; 于是, 绝对单位标识符仅被建议用于最外层'svg' 元素的width ,height以及内容中不包含变换的场合和期望用相对于设备的像素格或者相对于一个特定的实际世界单位尺寸来指定值的场合. Note that use ofpx units or anyother absolute unit identifiers can cause inconsistent visual results ondifferent viewing environments since the size of "1px" may map to adifferent number of user units on different systems; thus, absolute unitsidentifiers are only recommended for the width and the height on outermost 'svg' elements and situations where the contentcontains no transformations and it is desirable to specify values relative tothe device pixel grid or to a particular real world unit size.
对于定义为相对视口的尺寸百分数值: For percentage values that are defined to berelative to the size of viewport:
- 对于任何用视口的百分数表示的x坐标值或宽度值, 所使用的值为最近包含的视口中的用户单位的实际-宽度的百分数, 这里实际-宽度 是视口元素的用户坐标系内的视口元素的宽度尺寸. For any x-coordinate value or width value expressed as a percentage of the viewport, the value to use is the specified percentage of theactual-width in user units for the nearest containing viewport, where actual-width is the width dimension of the viewport element within the user coordinate system for the viewport element.
- 对于任何用视口的百分数表示的y坐标值或高度值, 所使用的值为最近包含的视口中的用户单位的实际-高度的百分数, 这里实际-高度 是视口元素的用户坐标系内的视口元素的高度尺寸. For any y-coordinate value or height value expressed as a percentage of the viewport, the value to use is the specified percentage of theactual-height in user units for the nearest containing viewport, where actual-height is the height dimension of the viewport element within the user coordinate system for the viewport element.
- 对于任何用视口的百分数表示的其它长度值, the percentage is calculated as the specified percentage of
sqrt((actual-width)**2 + (actual-height)**2))/sqrt(2).??? For any other length value expressed as a percentage of the viewport, the percentage is calculated as the specified percentage ofsqrt((actual-width)**2 + (actual-height)**2))/sqrt(2).
下面的例子Units 解释了对于不同类型单位的某些处理规则 . Example Units belowillustrates some of the processing rules for different types of units.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400px" height="200px" viewBox="0 0 4000 2000"
xmlns="http://www.w3.org/2000/svg">
<title>Example Units</title>
<desc>Illustrates various units options</desc>
<!-- Frame the picture -->
<rect x="5" y="5" width="3990" height="1990"
fill="none" stroke="blue" stroke-width="10"/>
<g fill="blue" stroke="red" font-family="Verdana" font-size="150">
<!-- Absolute unit specifiers -->
<g transform="translate(400,0)">
<text x="-50" y="300" fill="black" stroke="none">Abs. units:</text>
<rect x="0" y="400" width="4in" height="2in" stroke-width=".4in"/>
<rect x="0" y="750" width="384" height="192" stroke-width="38.4"/>
<g transform="scale(2)">
<rect x="0" y="600" width="4in" height="2in" stroke-width=".4in"/>
</g>
</g>
<!-- Relative unit specifiers -->
<g transform="translate(1600,0)">
<text x="-50" y="300" fill="black" stroke="none">Rel. units:</text>
<rect x="0" y="400" width="2.5em" height="1.25em" stroke-width=".25em"/>
<rect x="0" y="750" width="375" height="187.5" stroke-width="37.5"/>
<g transform="scale(2)">
<rect x="0" y="600" width="2.5em" height="1.25em" stroke-width=".25em"/>
</g>
</g>
<!-- Percentages -->
<g transform="translate(2800,0)">
<text x="-50" y="300" fill="black" stroke="none">Percentages:</text>
<rect x="0" y="400" width="10%" height="10%" stroke-width="1%"/>
<rect x="0" y="750" width="400" height="200" stroke-width="31.62"/>
<g transform="scale(2)">
<rect x="0" y="600" width="10%" height="10%" stroke-width="1%"/>
</g>
</g>
</g>
</svg>
Example Units
View this exampleas SVG (SVG-enabled browsers only)
左边的三个矩形说明使用绝对单位标识符之一, "in" 单位 (英寸). 上面所引用的图像是在一个96dpi 系统中生成的 (即, 1 英寸= 96 像素). 因此, 最上面的矩形, 它是以英寸指定的, 与中间的矩形的尺寸相同, 而中间的矩形是以用户单位指定的使得对于在最上面的矩形中对应的每一英寸有96的用户单位. (注记: 在不同屏幕分解度的系统上, 顶部和中间的矩形很可能以不同的尺寸进行渲染.) 此组底部的矩形说明当值以英寸指定进行缩放时将发生什么. The three rectangles on the left demonstrate the useof one of the absolute unit identifiers, the "in" unit (inch). Thereference image above was generated on a 96dpi system (i.e., 1 inch = 96pixels). Therefore, the topmost rectangle, which is specified in inches, isexactly the same size as the middle rectangle, which is specified in user unitssuch that there are 96 user units for each corresponding inch in the topmostrectangle. (Note: on systems with different screen resolutions, the top andmiddle rectangles will likely be rendered at different sizes.) The bottomrectangle of the group illustrates what happens when values specified in inchesare scaled.
中间的三个矩形说明使用相对单位标识符之一, "em" 单位. 因为 已经将在最外层的'g'元素上的'font-size' 属性设置为150 , 故每个 "em" 单位等于 150 用户单位. 最上面的矩形, 它是以 "em" 单位指定的, 与中间的矩形的尺寸相同, 而中间的矩形是以用户单位指定的使得对于在最上面的矩形中对应的每一 "em" 有150的用户单位. 此组底部的矩形说明当值以"em" 单位指定进行缩放时将发生什么. The three rectangles in the middle demonstrate the use of one of the relativeunit identifiers, the "em" unit. Because the 'font-size' property has been set to 150 on the outermost 'g' element, each "em" unit is equal to150 user units. The topmost rectangle, which is specified in "em"units, is exactly the same size as the middle rectangle, which is specified inuser units such that there are 150 user units for each corresponding"em" unit in the topmost rectangle. The bottom rectangle of the groupillustrates what happens when values specified in "em" units arescaled.
右边的三个矩形说明使用百分数.注意视口在视口元素(在这种情况下, 最外层 'svg' 元素)的用户坐标系的宽度和高度分别为 4000 和 2000, 因为 处理 viewBox 性质导致一个变换后的用户坐标系. 最上面的矩形, 它是以 百分数 单位指定的, 与中间的矩形的尺寸相同, 而中间的矩形是以等价的用户单位指定的. 特别, 注意到中间矩形的'stroke-width' 属性被设置为sqrt((actual-width)**2 + (actual-height)**2)) / sqrt(2) 的1% , 它在这种情况下为.01*sqrt(4000*4000+2000*2000)/sqrt(2), 即 31.62. 此组底部的矩形说明当值以百分数单位指定进行缩放时将发生什么. The bottom rectangleof the group illustrates what happens when values specified in percentage unitsare scaled. The three rectangles on the right demonstrate theuse of percentages. Note that the width and height of the viewport in the usercoordinate system for the viewport element (in this case, the outermost 'svg' element) are 4000 and 2000, respectively,because processing the viewBox attribute results in a transformed usercoordinate system. The topmost rectangle, which is specified in percentageunits, is exactly the same size as the middle rectangle, which is specified inequivalent user units. In particular, note that the 'stroke-width' property in the middle rectangle isset to 1% of the sqrt((actual-width)**2 + (actual-height)**2)) / sqrt(2), which in this case is .01*sqrt(4000*4000+2000*2000)/sqrt(2), or31.62. The bottom rectangle of the group illustrates what happens when valuesspecified in percentage units are scaled.
7.11 对象边框单位 Object bounding box units
下列元素提供表示坐标值和长度为在给定元素的边框(经由关键词objectBoundingBox)的分数 (并且, 在有些情况下, 为百分数) 的选项: Thefollowing elements offer the option of expressing coordinate values and lengthsas fractions (and, in some cases, percentages) of the boundingbox (via keyword objectBoundingBox) on agiven element:
元素 Element
性质Attribute
效果 Effect
'linearGradient'
gradientUnits="objectBoundingBox"
Indicates that the attributes which specify the gradient vector (x1,y1,x2, y2) represent fractions or percentages of the bounding box of the element to which the gradient is applied.
'radialGradient'
gradientUnits="objectBoundingBox"
Indicates that the attributes which specify the center (cx,cy), the radius (r) and focus (fx,fy) represent fractions or percentages of the bounding box of the element to which the gradient is applied.
'pattern'
patternUnits="objectBoundingBox"
Indicates that the attributes which define how to tile the pattern (x,y,width, height) are established using the bounding box of the element to which the pattern is applied.
'pattern'
patternContentUnits="objectBoundingBox"
Indicates that the user coordinate system for the contents of the pattern is established using the bounding box of the element to which the pattern is applied.
'clipPath'
clipPathUnits="objectBoundingBox"
Indicates that the user coordinate system for the contents of the 'clipPath' element is established using the bounding box of the element to which the clipping path is applied.
'mask'
maskUnits="objectBoundingBox"
Indicates that the attributes which define the masking region (x,y,width, height) is established using the bounding box of the element to which the mask is applied.
'mask'
maskContentUnits="objectBoundingBox"
Indicates that the user coordinate system for the contents of the 'mask' element are established using the bounding box of the element to which the mask is applied.
'filter'
filterUnits="objectBoundingBox"
Indicates that the attributes which define the filter effects region (x,y,width, height) represent fractions or percentages of the bounding box of the element to which the filter is applied.
'filter'
primitiveUnits="objectBoundingBox"
Indicates that the various length values within the filter primitives represent fractions or percentages of the bounding box of the element to which the filter is applied.
In the discussion that follows, the term applicable element is the element to which the giveneffect applies. For gradients and patterns, the applicable element is thegraphicselement which has its 'fill' or 'stroke' property referencing the given gradient orpattern. (See Inheritanceof Painting Properties. For special rules concerning text elements, see thediscussion of objectbounding box units and text elements.) For clipping paths, masks andfilters, the applicable element can be either acontainerelement or a graphicselement.
When keyword objectBoundingBoxis used, then the effect is as if a supplemental transformation matrix wereinserted into the list of nested transformation matrices to create a new usercoordinate system.
First, the (minx,miny)and (maxx,maxy) coordinates are determinedfor the applicable element and all of its descendants. The valuesminx,miny,maxx and maxy aredetermined by computing the maximum extent of the shape of the element in X andY with respect to the user coordinate system for the applicable element. Thebounding box is the tightest fitting rectangle aligned with the axes of theapplicable element's user coordinate system that entirely encloses theapplicable element and its descendants. The bounding box is computed exclusiveof any values for clipping, masking, filter effects, opacity and stroke-width.For curved shapes, the bounding box encloses all portions of the shape, notjust end points. For'text' elements, for the purposes of the boundingbox calculation, each glyph is treated as a separate graphics element. Thecalculations assume that all glyphs occupy the full glyph cell. For example,for horizontal text, the calculations assume that each glyph extends verticallyto the full ascent and descent values for the font.
Then, coordinate (0,0) in the new user coordinate system ismapped to the (minx,miny) corner of the tight bounding box within the usercoordinate system of the applicable element and coordinate (1,1) in the newuser coordinate system is mapped to the (maxx,maxy) corner of the tightbounding box of the applicable element. In most situations, the followingtransformation matrix produces the correct effect:
[ (maxx-minx) 0 0 (maxy-miny) minx miny ]
When percentages are used with attributes that define thegradient vector, the pattern tile, the filter region or the masking region, apercentage represents the same value as the corresponding decimal value (e.g.,50% means the same as 0.5). If percentages are used within the content of a 'pattern', 'clipPath', 'mask' or 'filter' element, these values are treatedaccording to the processing rules for percentages as defined inUnits.
Any numeric value can be specified for values expressed asa fraction or percentage of object bounding box units. In particular, fractionsless are zero or greater than one and percentages less than 0% or greater than100% can be specified.
Keyword objectBoundingBoxshould not be used when the geometry of the applicable element has no width orno height, such as the case of a horizontal or vertical line, even when the linehas actual thickness when viewed due to having a non-zero stroke width sincestroke width is ignored for bounding box calculations. When the geometry of theapplicable element has no width or height and objectBoundingBoxis specified, then the given effect (e.g., a gradient or a filter) will beignored.
7.12 DOM interfaces
The following interfaces are defined below: SVGPoint, SVGPointList,SVGMatrix,SVGTransform,SVGTransformList,SVGAnimatedTransformList,SVGPreserveAspectRatio, SVGAnimatedPreserveAspectRatio.
Interface SVGPoint
Many of the SVG DOM interfaces refer to objects of class SVGPoint. An SVGPointis an (x,y) coordinate pair. When used in matrix operations, an SVGPoint is treated as a vector of the form:
[x]
[y]
[1]
IDL Definition
interface SVGPoint { attribute float x;
// raises DOMException on setting
attribute float y;
// raises DOMException on setting
SVGPoint matrixTransform ( in SVGMatrix matrix );
};
Attributes
float x
The xcoordinate.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
float y
The ycoordinate.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
Methods
matrixTransform
Applies a 2x3 matrixtransformation on this SVGPoint object and returns a new, transformed SVGPointobject:
newpoint = matrix * thispoint
Parameters
in SVGMatrix matrix
The matrix which is to be applied to this SVGPoint object.
Return value
SVGPoint
A new SVGPoint object.
No Exceptions
Interface SVGPointList
This interface defines a list of SVGPoint objects.
SVGPointList has the same attributes and methods as other SVGxxxList interfaces.Implementers may consider using a single base class to implement the variousSVGxxxList interfaces.
IDL Definition
interface SVGPointList { readonly attribute unsigned long numberOfItems;
void clear ( )
raises( DOMException );
SVGPoint initialize ( in SVGPoint newItem )
raises( DOMException, SVGException );
SVGPoint getItem ( in unsigned long index )
raises( DOMException );
SVGPoint insertItemBefore ( in SVGPoint newItem, in unsigned long index )
raises( DOMException, SVGException );
SVGPoint replaceItem ( in SVGPoint newItem, in unsigned long index )
raises( DOMException, SVGException );
SVGPoint removeItem ( in unsigned long index )
raises( DOMException );
SVGPoint appendItem ( in SVGPoint newItem )
raises( DOMException, SVGException );
};
Attributes
readonly unsignedlong numberOfItems
The number ofitems in the list.
Methods
clear
Clears allexisting current items from the list, with the result being an empty list.
No Parameters
No Return Value
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.
initialize
Clears allexisting current items from the list and re-initializes the list to hold thesingle item specified by the parameter.
Parameters
in SVGPoint newItem
The item which should become the only member of the list.
Return value
SVGPoint
The item being inserted into the list.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.
SVGException
SVG_WRONG_TYPE_ERR: Raised if parameter newItem is the wrong type of object for the given list.
getItem
Returns thespecified item from the list.
Parameters
in unsigned long index
The index of the item from the list which is to be returned. The first item is number 0.
Return value
SVGPoint
The selected item.
Exceptions
DOMException
INDEX_SIZE_ERR: Raised if the index number is negative or greater than or equal to numberOfItems.
insertItemBefore
Inserts a newitem into the list at the specified position. The first item is number 0. IfnewItem is already in a list, it is removed from its previous list before it isinserted into this list.
Parameters
in SVGPoint newItem
The item which is to be inserted into the list.
in unsigned long index
The index of the item before which the new item is to be inserted. The first item is number 0.
If the index is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.
Return value
SVGPoint
The inserted item.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.
SVGException
SVG_WRONG_TYPE_ERR: Raised if parameter newItem is the wrong type of object for the given list.
replaceItem
Replaces anexisting item in the list with a new item. If newItem is already in a list, itis removed from its previous list before it is inserted into this list.
Parameters
in SVGPoint newItem
The item which is to be inserted into the list.
in unsigned long index
The index of the item which is to be replaced. The first item is number 0.
Return value
SVGPoint
The inserted item.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.
INDEX_SIZE_ERR: Raised if the index number is negative or greater than or equal to numberOfItems.
SVGException
SVG_WRONG_TYPE_ERR: Raised if parameter newItem is the wrong type of object for the given list.
removeItem
Removes anexisting item from the list.
Parameters
in unsigned long index
The index of the item which is to be removed. The first item is number 0.
Return value
SVGPoint
The removed item.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.
INDEX_SIZE_ERR: Raised if the index number is negative or greater than or equal to numberOfItems.
appendItem
Inserts a newitem at the end of the list. If newItem is already in a list, it is removedfrom its previous list before it is inserted into this list.
Parameters
in SVGPoint newItem
The item which is to be inserted into the list. The first item is number 0.
Return value
SVGPoint
The inserted item.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.
SVGException
SVG_WRONG_TYPE_ERR: Raised if parameter newItem is the wrong type of object for the given list.
Interface SVGMatrix
Many of SVG's graphics operations utilize 2x3 matrices ofthe form:
[a c e]
[b d f]
which, when expanded into a 3x3 matrix for the purposes ofmatrix arithmetic, become:
[a c e]
[b d f]
[0 0 1]
IDL Definition
interface SVGMatrix { attribute float a;
// raises DOMException on setting
attribute float b;
// raises DOMException on setting
attribute float c;
// raises DOMException on setting
attribute float d;
// raises DOMException on setting
attribute float e;
// raises DOMException on setting
attribute float f;
// raises DOMException on setting
SVGMatrix multiply ( in SVGMatrix secondMatrix );
SVGMatrix inverse ( )
raises( SVGException );
SVGMatrix translate ( in float x, in float y );
SVGMatrix scale ( in float scaleFactor );
SVGMatrix scaleNonUniform ( in float scaleFactorX, in float scaleFactorY );
SVGMatrix rotate ( in float angle );
SVGMatrix rotateFromVector ( in float x, in float y )
raises( SVGException );
SVGMatrix flipX ( );
SVGMatrix flipY ( );
SVGMatrix skewX ( in float angle );
SVGMatrix skewY ( in float angle );
};
Attributes
float a
The a component of the matrix.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
float b
The b component of the matrix.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
float c
The c component of the matrix.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
float d
The d component of the matrix.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
float e
The e component of the matrix.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
float f
The f component of the matrix.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
Methods
multiply
Performs matrixmultiplication. This matrix is post-multiplied by another matrix, returning theresulting new matrix.
Parameters
in SVGMatrix secondMatrix
The matrix which is post-multiplied to this matrix.
Return value
SVGMatrix
The resulting matrix.
No Exceptions
inverse
Returns theinverse matrix.
No Parameters
Return value
SVGMatrix
The inverse matrix.
Exceptions
SVGException
SVG_MATRIX_NOT_INVERTABLE: Raised if this matrix is not invertable.
translate
Post-multipliesa translation transformation on the current matrix and returns the resultingmatrix.
Parameters
in float x
The distance to translate along the x-axis.
in float y
The distance to translate along the y-axis.
Return value
SVGMatrix
The resulting matrix.
No Exceptions
scale
Post-multipliesa uniform scale transformation on the current matrix and returns the resultingmatrix.
Parameters
in float scaleFactor
Scale factor in both X and Y.
Return value
SVGMatrix
The resulting matrix.
No Exceptions
scaleNonUniform
Post-multipliesa non-uniform scale transformation on the current matrix and returns theresulting matrix.
Parameters
in float scaleFactorX
Scale factor in X.
in float scaleFactorY
Scale factor in Y.
Return value
SVGMatrix
The resulting matrix.
No Exceptions
rotate
Post-multipliesa rotation transformation on the current matrix and returns the resultingmatrix.
Parameters
in float angle
Rotation angle.
Return value
SVGMatrix
The resulting matrix.
No Exceptions
rotateFromVector
Post-multipliesa rotation transformation on the current matrix and returns the resultingmatrix. The rotation angle is determined by taking (+/-) atan(y/x). Thedirection of the vector (x,y) determines whether the positive or negative anglevalue is used.
Parameters
in float x
The X coordinate of the vector (x,y). Must not be zero.
in float y
The Y coordinate of the vector (x,y). Must not be zero.
Return value
SVGMatrix
The resulting matrix.
Exceptions
SVGException
SVG_INVALID_VALUE_ERR: Raised if one of the parameters has an invalid value.
flipX
Post-multipliesthe transformation [-1 0 0 1 0 0] and returns the resulting matrix.
No Parameters
Return value
SVGMatrix
The resulting matrix.
No Exceptions
flipY
Post-multipliesthe transformation [1 0 0 -1 0 0] and returns the resulting matrix.
No Parameters
Return value
SVGMatrix
The resulting matrix.
No Exceptions
skewX
Post-multipliesa skewX transformation on the current matrix and returns the resulting matrix.
Parameters
in float angle
Skew angle.
Return value
SVGMatrix
The resulting matrix.
No Exceptions
skewY
Post-multipliesa skewY transformation on the current matrix and returns the resulting matrix.
Parameters
in float angle
Skew angle.
Return value
SVGMatrix
The resulting matrix.
No Exceptions
Interface SVGTransform
SVGTransform is the interface for one of the component transformations within a SVGTransformList; thus, a SVGTransform object corresponds to a singlecomponent (e.g., "scale(..)" or "matrix(...)") within a transform attribute specification.
IDL Definition
interface SVGTransform { // Transform Types
const unsigned short SVG_TRANSFORM_UNKNOWN = 0;
const unsigned short SVG_TRANSFORM_MATRIX = 1;
const unsigned short SVG_TRANSFORM_TRANSLATE = 2;
const unsigned short SVG_TRANSFORM_SCALE = 3;
const unsigned short SVG_TRANSFORM_ROTATE = 4;
const unsigned short SVG_TRANSFORM_SKEWX = 5;
const unsigned short SVG_TRANSFORM_SKEWY = 6;
readonly attribute unsigned short type;
readonly attribute SVGMatrix matrix;
readonly attribute float angle;
void setMatrix ( in SVGMatrix matrix );
void setTranslate ( in float tx, in float ty );
void setScale ( in float sx, in float sy );
void setRotate ( in float angle, in float cx, in float cy );
void setSkewX ( in float angle );
void setSkewY ( in float angle );
};
Definition group Transform Types
Definedconstants
SVG_TRANSFORM_UNKNOWN
The unit type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_TRANSFORM_MATRIX
A "matrix(...)" transformation.
SVG_TRANSFORM_TRANSLATE
A "translate(...)" transformation.
SVG_TRANSFORM_SCALE
A "scale(...)" transformation.
SVG_TRANSFORM_ROTATE
A "rotate(...)" transformation.
SVG_TRANSFORM_SKEWX
A "skewX(...)" transformation.
SVG_TRANSFORM_SKEWY
A "skewY(...)" transformation.
Attributes
readonly unsignedshort type
The type of thevalue as specified by one of the constants specified above.
readonly SVGMatrix matrix
The matrix thatrepresents this transformation.
For SVG_TRANSFORM_MATRIX, the matrix contains the a, b, c, d, e, f valuessupplied by the user.
For SVG_TRANSFORM_TRANSLATE, e and f represent the translation amounts(a=1,b=0,c=0,d=1).
For SVG_TRANSFORM_SCALE, a and d represent the scale amounts (b=0,c=0,e=0,f=0).
For SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY, a, b, cand d represent the matrix which will result in the given transformation(e=0,f=0).
readonly float angle
A convenienceattribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX andSVG_TRANSFORM_SKEWY. It holds the angle that was specified.
For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE,angle will be zero.
Methods
setMatrix
Sets thetransform type to SVG_TRANSFORM_MATRIX, with parameter matrix defining the newtransformation.
Parameters
in SVGMatrix matrix
The new matrix for the transformation.
No Return Value
No Exceptions
setTranslate
Sets thetransform type to SVG_TRANSFORM_TRANSLATE, with parameters tx and ty definingthe translation amounts.
Parameters
in float tx
The translation amount in X.
in float ty
The translation amount in Y.
No Return Value
No Exceptions
setScale
Sets thetransform type to SVG_TRANSFORM_SCALE, with parameters sx and sy defining thescale amounts.
Parameters
in float sx
The scale factor in X.
in float sy
The scale factor in Y.
No Return Value
No Exceptions
setRotate
Sets thetransform type to SVG_TRANSFORM_ROTATE, with parameter angle defining therotation angle and parameters cx and cy defining the optional centre ofrotation.
Parameters
in float angle
The rotation angle.
in float cx
The x coordinate of centre of rotation.
in float cy
The y coordinate of centre of rotation.
No Return Value
No Exceptions
setSkewX
Sets thetransform type to SVG_TRANSFORM_SKEWX, with parameter angle defining the amountof skew.
Parameters
in float angle
The skew angle.
No Return Value
No Exceptions
setSkewY
Sets thetransform type to SVG_TRANSFORM_SKEWY, with parameter angle defining the amountof skew.
Parameters
in float angle
The skew angle.
No Return Value
No Exceptions
Interface SVGTransformList
This interface defines a list of SVGTransform objects.
The SVGTransformListand SVGTransform interfaces correspond tothe various attributes which specify a set of transformations, such as the transform attribute which is available for many of SVG'selements.
SVGTransformList has the same attributes and methods as other SVGxxxList interfaces.Implementers may consider using a single base class to implement the variousSVGxxxList interfaces.
IDL Definition
interface SVGTransformList { readonly attribute unsigned long numberOfItems;
void clear ( )
raises( DOMException );
SVGTransform initialize ( in SVGTransform newItem )
raises( DOMException, SVGException );
SVGTransform getItem ( in unsigned long index )
raises( DOMException );
SVGTransform insertItemBefore ( in SVGTransform newItem, in unsigned long index )
raises( DOMException, SVGException );
SVGTransform replaceItem ( in SVGTransform newItem, in unsigned long index )
raises( DOMException, SVGException );
SVGTransform removeItem ( in unsigned long index )
raises( DOMException );
SVGTransform appendItem ( in SVGTransform newItem )
raises( DOMException, SVGException );
SVGTransform createSVGTransformFromMatrix ( in SVGMatrix matrix );
SVGTransform consolidate ( );
};
Attributes
readonly unsignedlong numberOfItems
The number ofitems in the list.
Methods
clear
Clears allexisting current items from the list, with the result being an empty list.
No Parameters
No Return Value
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.
initialize
Clears allexisting current items from the list and re-initializes the list to hold thesingle item specified by the parameter.
Parameters
in SVGTransform newItem
The item which should become the only member of the list.
Return value
SVGTransform
The item being inserted into the list.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.
SVGException
SVG_WRONG_TYPE_ERR: Raised if parameter newItem is the wrong type of object for the given list.
getItem
Returns thespecified item from the list.
Parameters
in unsigned long index
The index of the item from the list which is to be returned. The first item is number 0.
Return value
SVGTransform
The selected item.
Exceptions
DOMException
INDEX_SIZE_ERR: Raised if the index number is negative or greater than or equal to numberOfItems.
insertItemBefore
Inserts a newitem into the list at the specified position. The first item is number 0. IfnewItem is already in a list, it is removed from its previous list before it isinserted into this list.
Parameters
in SVGTransform newItem
The item which is to be inserted into the list.
in unsigned long index
The index of the item before which the new item is to be inserted. The first item is number 0.
If the index is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.
Return value
SVGTransform
The inserted item.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.
SVGException
SVG_WRONG_TYPE_ERR: Raised if parameter newItem is the wrong type of object for the given list.
replaceItem
Replaces anexisting item in the list with a new item. If newItem is already in a list, itis removed from its previous list before it is inserted into this list.
Parameters
in SVGTransform newItem
The item which is to be inserted into the list.
in unsigned long index
The index of the item which is to be replaced. The first item is number 0.
Return value
SVGTransform
The inserted item.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.
INDEX_SIZE_ERR: Raised if the index number is negative or greater than or equal to numberOfItems.
SVGException
SVG_WRONG_TYPE_ERR: Raised if parameter newItem is the wrong type of object for the given list.
removeItem
Removes anexisting item from the list.
Parameters
in unsigned long index
The index of the item which is to be removed. The first item is number 0.
Return value
SVGTransform
The removed item.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.
INDEX_SIZE_ERR: Raised if the index number is negative or greater than or equal to numberOfItems.
appendItem
Inserts a newitem at the end of the list. If newItem is already in a list, it is removedfrom its previous list before it is inserted into this list.
Parameters
in SVGTransform newItem
The item which is to be inserted into the list. The first item is number 0.
Return value
SVGTransform
The inserted item.
Exceptions
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised when the list cannot be modified.
SVGException
SVG_WRONG_TYPE_ERR: Raised if parameter newItem is the wrong type of object for the given list.
createSVGTransformFromMatrix
Creates an SVGTransform object which is initialized totransform of type SVG_TRANSFORM_MATRIX and whose values are the given matrix.
Parameters
in SVGMatrix matrix
The matrix which defines the transformation.
Return value
SVGTransform
The returned SVGTransform object.
No Exceptions
consolidate
Consolidates thelist of separate SVGTransform objects bymultiplying the equivalent transformation matrices together to result in a listconsisting of a single SVGTransform object oftype SVG_TRANSFORM_MATRIX.
No Parameters
Return value
SVGTransform
The resulting SVGTransform object which becomes single item in the list. If the list was empty, then a value of null is returned.
No Exceptions
Interface SVGAnimatedTransformList
Used for the various attributes whichspecify a set of transformations, such as the transformattribute which is available for many of SVG's elements, and which can beanimated.
IDL Definition
interface SVGAnimatedTransformList { readonly attribute SVGTransformList baseVal;
readonly attribute SVGTransformList animVal;
};
Attributes
readonly SVGTransformList baseVal
The base valueof the given attribute before applying any animations.
readonly SVGTransformList animVal
If the givenattribute or property is being animated, contains the current animated value ofthe attribute or property, and both the object itself and its contents arereadonly. If the given attribute or property is not currently being animated,contains the same value as 'baseVal'.
Interface SVGPreserveAspectRatio
The SVGPreserveAspectRatiointerface corresponds to the preserveAspectRatioattribute, which is available for some of SVG's elements.
IDL Definition
interface SVGPreserveAspectRatio { // Alignment Types
const unsigned short SVG_PRESERVEASPECTRATIO_UNKNOWN = 0;
const unsigned short SVG_PRESERVEASPECTRATIO_NONE = 1;
const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMIN = 2;
const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMIN = 3;
const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMIN = 4;
const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMID = 5;
const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMID = 6;
const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMID = 7;
const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMAX = 8;
const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMAX = 9;
const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMAX = 10;
// Meet-or-slice Types
const unsigned short SVG_MEETORSLICE_UNKNOWN = 0;
const unsigned short SVG_MEETORSLICE_MEET = 1;
const unsigned short SVG_MEETORSLICE_SLICE = 2;
attribute unsigned short align;
// raises DOMException on setting
attribute unsigned short meetOrSlice;
// raises DOMException on setting
};
Definition group Alignment Types
Definedconstants
SVG_PRESERVEASPECTRATIO_UNKNOWN
The enumeration was set to a value that is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_PRESERVEASPECTRATIO_NONE
Corresponds to value 'none' for attribute preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMINYMIN
Corresponds to value 'xMinYMin' for attribute preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMIDYMIN
Corresponds to value 'xMidYMin' for attribute preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMAXYMIN
Corresponds to value 'xMaxYMin' for attribute preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMINYMID
Corresponds to value 'xMinYMid' for attribute preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMIDYMID
Corresponds to value 'xMidYMid' for attribute preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMAXYMID
Corresponds to value 'xMaxYMid' for attribute preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMINYMAX
Corresponds to value 'xMinYMax' for attribute preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMIDYMAX
Corresponds to value 'xMidYMax' for attribute preserveAspectRatio.
SVG_PRESERVEASPECTRATIO_XMAXYMAX
Corresponds to value 'xMaxYMax' for attribute preserveAspectRatio.
Definition group Meet-or-slice Types
Definedconstants
SVG_MEETORSLICE_UNKNOWN
The enumeration was set to a value that is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_MEETORSLICE_MEET
Corresponds to value 'meet' for attribute preserveAspectRatio.
SVG_MEETORSLICE_SLICE
Corresponds to value 'slice' for attribute preserveAspectRatio.
Attributes
unsigned short align
The type of thealignment value as specified by one of the constants specified above.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
unsigned short meetOrSlice
The type of themeet-or-slice value as specified by one of the constants specified above.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
Interface SVGAnimatedPreserveAspectRatio
Used for attributes of typeSVGPreserveAspectRatio which can be animated.
IDL Definition
interface SVGAnimatedPreserveAspectRatio { readonly attribute SVGPreserveAspectRatio baseVal;
readonly attribute SVGPreserveAspectRatio animVal;
};
Attributes
readonly SVGPreserveAspectRatio baseVal
The base valueof the given attribute before applying any animations.
readonly SVGPreserveAspectRatio animVal
If the givenattribute or property is being animated, contains the current animated value ofthe attribute or property, and both the object itself and its contents arereadonly. If the given attribute or property is not currently being animated,contains the same
previous next contents elements attributes properties index
- 精图规范1.0----7 坐标系, 变换和单位Coordinate Systems, Transformations and Units
- XNA--3D Coordinate Systems and Projections
- Arcgis坐标系中的WKID代码查询（Geographic Coordinate Systems）
- Cocos2dx内的坐标系(Coordinate Systems In Cocos2dx)
- Cocos2dx内的坐标系(Coordinate Systems In Cocos2dx)
- QML 进阶---Coordinate Transformations
- 单位Units和 全局变量Globally Available Variables
- ArcGIS Geographic Coordinate Systems
- Coordinate Systems in OpenGL
- OpenGL学习脚印: 坐标和变换的数学基础(math-coordinates and transformations)
- OpenGL学习脚印: 坐标和变换的数学基础(math-coordinates and transformations)
- OpenGL中的坐标系和变换
- Projective transformations射影变换
- 坐标系变换
- WKID对照表(Projected Coordinate Systems)网址
- WKID对照表：Projected Coordinate Systems
- 【Modern OpenGL】坐标系统 Coordinate Systems
- hololens 坐标系统 spatial coordinate systems
- 关于Oracle中的latch和mutex
- 在MFC中添加用户自定义消息
- NGUI的UISprite动态染色的一种解决方案
- 使用HTML HELP WORKSHOP制作CHM帮助文档
- 图：广度优先搜索（Breadth_First Search）
- 精图规范1.0----7 坐标系, 变换和单位Coordinate Systems, Transformations and Units
- 黑马程序员_网络电视用中国电信路由器不能联网的问题
- cocos2dx-3.0(12)------33场景切换效果
- activema 为什么会丢包呢?
- ffmpeg中av_interleaved_write_frame函数的源码分析及其用法
- ZOJ 3789 Gears (并查集 合并+删除+离根节点的距离)
- 设计模式-单例模式
- JNIUtility
- 机房收费系统重构起始——举步维艰
