精图规范1.0----13 渐变和模样 Gradients and Patterns
来源：互联网 发布：算法设计手册 pdf 编辑：程序博客网 时间：2024/06/04 07:00
previous next contents elements attributes properties index
04 September 2001
13 渐变和模样 Gradients and Patterns
内容 Contents
- 13.1 引言 Introduction
- 13.2 渐变 Gradients
- 13.2.1 引言 Introduction
- 13.2.2 线性渐变 Linear gradients
- 13.2.3 放射渐变 Radial gradients
- 13.2.4 渐变关键点 Gradient stops
- 13.3 模样 Patterns
- 13.4 文档对象模型接口 DOM interfaces
13.1 引言 Introduction
对于精图而言, 可以使用下列方式对形状和文本进行填充(即, 绘制内部) 或描边 (即, 绘制轮廓) : With SVG, you can fill (i.e., paint the interior) orstroke (i.e., paint the outline) of shapes and text using one of the following:
- 颜色 color
- 渐变 (线性或放射)gradients (linear or radial)
- 模样 (矢量或图像, 也许为平铺的)patterns (vector or image, possibly tiled)
精图使用绘制服务器的普通想法. 渐变和模样正是特殊类型的内建绘制服务器. SVG uses the general notion of apaint server.Gradients and patterns are just specific types of built-in paint servers.
在 'fill' 或'stroke' 属性上使用URI 引用 来引用绘制服务器. Paint serversare referenced using a URIreference on a 'fill' or 'stroke' property.
13.2 渐变 Gradients
13.2.1 引言 Introduction
渐变由沿某一方向从一种颜色到另一种颜色连续光滑思维颜色转换构成, 也许在同一方向跟随着到其它颜色的附加转换. 精图提供两种类型的渐变, 线性渐变和 放射渐变. Gradients consist of continuously smooth color transitions along a vector fromone color to another, possibly followed by additional transitions along thesame vector to other colors. SVG provides for two types of gradients,lineargradients and radialgradients.
一旦定义好, 一个给定的 图形元素的 'fill' 或'stroke' 属性上便可以引用此渐变表示给定的元素将根据此渐变来填充或描边. Once defined, gradients are then referenced using'fill' or 'stroke' properties on a given graphicselement to indicate that the given element shall be filled or stroked withthe referenced gradient.
13.2.2线性渐变 Lineargradients
线性渐变通过一个 'linearGradient' 元素来定义. Linear gradients aredefined by a'linearGradient' element.
<!ENTITY % linearGradientExt "" >
<!ELEMENT linearGradient (%descTitleMetadata;,(stop|animate|set|animateTransform
%linearGradientExt;)*) >
<!ATTLIST linearGradient
%stdAttrs;
%xlinkRefAttrs;
xlink:href %URI; #IMPLIED
externalResourcesRequired %Boolean; #IMPLIED
class %ClassList; #IMPLIED
style %StyleSheet; #IMPLIED
%PresentationAttributes-Color;
%PresentationAttributes-Gradients;
gradientUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
gradientTransform %TransformList; #IMPLIED
x1 %Coordinate; #IMPLIED
y1 %Coordinate; #IMPLIED
x2 %Coordinate; #IMPLIED
y2 %Coordinate; #IMPLIED
spreadMethod (pad | reflect | repeat) #IMPLIED >
属性定义:Attributedefinitions:
gradientUnits = "userSpaceOnUse |objectBoundingBox"
定义x1, y1, x2, y2 属性的坐标系. Defines the coordinatesystem for attributesx1, y1, x2, y2.
如果 gradientUnits="userSpaceOnUse", x1, y1, x2, y2 按照当渐变被引用的地方当前用户坐标系来表示其值(即, 在属性'fill' 或'stroke' 上引用渐变元素的元素上的当前用户坐标系) 然后使用由属性gradientTransform指定的变换. If gradientUnits="userSpaceOnUse",x1, y1, x2, y2 represent values in the coordinatesystem that results from taking the current user coordinate system in place atthe time when the gradient element is referenced (i.e., the user coordinatesystem for the element referencing the gradient element via a'fill' or 'stroke' property) and then applying the transformspecified by attribute gradientTransform.
如果 gradientUnits="objectBoundingBox", 属性x1, y1, x2, y2 的用户坐标系依照使用渐变的元素的边界框(参见 对象边界框单位)来建立 然后使用由属性gradientTransform指定的变换. If gradientUnits="objectBoundingBox",the user coordinate system for attributes x1, y1, x2, y2is established using the bounding box of the element to which the gradient isapplied (seeObjectbounding box units) and then applying the transform specified by attributegradientTransform.
当 gradientUnits="objectBoundingBox" 并且 gradientTransform 为单位矩阵, 线性渐变的条纹垂直于在对象边界框(即, 理论坐标系 这里 (0,0) 在对象边界框的左上角而(1,1)在对象边界框的右下角)渐变的方向 . 当对象边界框不为正方形时, 由于进行从边界框空间到用户空间的非一致的缩放变换在概念上垂直于对象边界框渐变方向的条纹将渲染成与用户空间的渐变方向不垂直. When gradientUnits="objectBoundingBox"andgradientTransform is the identity matrix, thestripes of the linear gradient are perpendicular to the gradient vector inobject bounding box space (i.e., the abstract coordinate system where (0,0) isat the top/left of the object bounding box and (1,1) is at the bottom/right ofthe object bounding box). When the object's bounding box is not square, thestripes that are conceptually perpendicular to the gradient vector withinobject bounding box space will render non-perpendicular relative to thegradient vector in user space due to application of the non-uniform scalingtransformation from bounding box space to user space.
如果不指定属性 gradientUnits , 那么其效果相当于指定了属性的值为 objectBoundingBox . Ifattribute gradientUnits is not specified, then theeffect is as if a value of objectBoundingBox werespecified.
Animatable:yes.
gradientTransform = "<transform-list>"
包含从渐变坐标系到目标坐标系(即,userSpaceOnUse 或objectBoundingBox)可选的附加变换的指定 . 它允许对渐变进行歪斜变换. 此附加的变换与以前定义的变换进行相乘 (即, 插入到右边) , 这以前的变换包括需要从对象边界框单位到用户空间所进行的隐式的变换. Containsthe definition of an optional additional transformation from the gradientcoordinate system onto the target coordinate system (i.e., userSpaceOnUse orobjectBoundingBox). This allows for things such as skewing the gradient. Thisadditional transformation matrix is post-multiplied to (i.e., inserted to theright of) any previously defined transformations, including the implicittransformation necessary to convert fromobjectbounding box units to user space.
如果不指定属性gradientTransform , 那么效果相当于指定了一个单位变换. If attributegradientTransform is not specified, then theeffect is as if an identity transform were specified.
Animatable:yes.
x1 = "<coordinate>"
x1, y1,x2, y2 指定线性渐变的渐变矢量 . 此渐变矢量 提供起点和终点(渐变关键点 将映照其上).x1, y1, x2, y2 的值既可为数值也可为百分比. x1, y1, x2, y2 define agradientvector for the linear gradient. Thisgradient vector providesstarting and ending points onto which thegradientstops are mapped. The values ofx1, y1, x2, y2 can beeither numbers or percentages.
如果不指定属性x1 , 那么效果相当于指定了值"0%" .If the attribute is not specified, the effect is asif a value of "0%" were specified.
Animatable:yes.
y1 = "<coordinate>"
参见x1.
如果不指定属性y1 , 那么效果相当于指定了值"0%" .If the attribute is not specified, the effectis as if a value of "0%" were specified.
Animatable:yes.
x2 = "<coordinate>"
参见x1.
如果不指定属性x2 , 那么效果相当于指定了值"100%" .If the attribute is not specified, the effect isas if a value of "100%" were specified.
Animatable:yes.
y2 = "<coordinate>"
参见x1.
如果不指定属性y2 , 那么效果相当于指定了值 "0%" .If the attribute is not specified, the effect is asif a value of "0%" were specified.
Animatable:yes.
spreadMethod = "pad | reflect | repeat"
表示在目标矩形的边界内部当渐变开始或结束时将会发生什么. 可能的取值为: pad,这是说用用渐变的端点颜色填充目标区域的其余部分,reflect, 这是说反射渐变的方式起点到终点, 终点到起点, 起点到终点, 等等. 直到目标矩形被填充, 和repeat, 这是说重复渐变的方式起点到终点, 起点到终点, 起点到终点, 等等. 直到目标矩形被填充. Indicates what happens if the gradient starts orends inside the bounds of thetarget rectangle. Possible values are:pad,which says to use the terminal colors of the gradient to fill the remainder ofthe target region,reflect, which says to reflect the gradient patternstart-to-end, end-to-start, start-to-end, etc. continuously until thetargetrectangle is filled, and repeat, which says to repeat thegradient pattern start-to-end, start-to-end, start-to-end, etc. continuouslyuntil the target region is filled.
如果不指定此属性, 效果相当于指定其值为 "pad". If theattribute is not specified, the effect is as if a value of "pad" werespecified.
Animatable:yes.
xlink:href = "<uri>"
指向当前精图文档片段内的不同的'linearGradient' 或 'radialGradient' 元素的 URI 引用.任何在引用元素中定义而在此元素上未定义的 'linearGradient' 属性将被此元素所继承. 如果此元素未定义渐变关键点, 而引用元素定义了 (也许是由于它本身的 href 属性), 那么此元素从引用元素那里继承渐变关键点. 继承可以间接通过多级进行; 于是, 如果引用元素通过它自己的href 属性继承属性和渐变关键点, 那么当前元素也可以继承那些属性和渐变关键点. AURIreference to a different 'linearGradient'or 'radialGradient' element within the currentSVG document fragment. Any 'linearGradient'attributes which are defined on the referenced element which are not defined onthis element are inherited by this element. If this element has no definedgradient stops, and the referenced element does (possibly due to its own href attribute), then this element inherits the gradientstop from the referenced element. Inheritance can be indirect to an arbitrarylevel; thus, if the referenced element inherits attribute or gradient stops dueto its own href attribute, then the currentelement can inherit those attributes or gradient stops.
Animatable:yes.
在别处定义的属性:Attributesdefined elsewhere:
%stdAttrs;,%xlinkRefAttrs;,externalResourcesRequired,%PresentationAttributes-Color;,%PresentationAttributes-Gradients;.
属性 x1,y1, x2, y2可以使用百分比. 对于gradientUnits="userSpaceOnUse"而言, 百分比表示相对于当前视口的值.而对于gradientUnits="objectBoundingBox" 而言, 百分比表示相对于此对象的边界框的值. Percentages are allowed forx1, y1, x2, y2.For gradientUnits="userSpaceOnUse", percentages represent valuesrelative to the current viewport. ForgradientUnits="objectBoundingBox", percentages represent valuesrelative to the bounding box for the object.
如果 x1 = x2 并且y1 = y2,那么绘制的区域将按照由最后的渐变关键点的颜色和透明度所决定的单一颜色来绘制.Ifx1= x2 and y1 = y2, then thearea to be painted will be painted as a single color using the color andopacity of the lastgradientstop.
'linearGradient' 元素可以从其祖先继承性质 ; 但不能从引用 'linearGradient' 元素的元素中继承性质. Propertiesinherit into the 'linearGradient' element fromits ancestors; properties do not inherit from the element referencingthe 'linearGradient' element.
决不会直接对'linearGradient' 元素进行渲染; 它们唯一的用法是如通过 'fill' 或'stroke' 属性所进行的引用. 'display' 属性不能用于'linearGradient' 元素 ; 于是, 'linearGradient'元素不会被直接渲染即使 'display' 被设置未非none的值, 并且当在'linearGradient' 元素上或它的祖先上'display' 属性的值被设置为none 'linearGradient' 元素仍然可以被引用. 'linearGradient'elements are never rendered directly; their only usage is as something that canbe referenced using the'fill' and'stroke' properties. The 'display' property does not apply to the 'linearGradient' element; thus, 'linearGradient' elements are not directly renderedeven if the'display' property is set to a value other than none, and 'linearGradient'elements are available for referencing even when the'display' property on the 'linearGradient'element or any of its ancestors is set to none.
例子 lingrad01 说明如何通过引用一线性渐变绘制服务器填充一个矩形. Example lingrad01 shows howto fill a rectangle by referencing a linear gradient paint server.
<?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="8cm" height="4cm" viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg">
<desc>Example lingrad01 - fill a rectangle using a
linear gradient paint server</desc>
<g>
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<!-- Outline the drawing area in blue -->
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="398"/>
<!-- The rectangle is filled using a linear gradient paint server -->
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5"
x="100" y="100" width="600" height="200"/>
</g>
</svg>
Example lingrad01
View thisexample as SVG (SVG-enabled browsers only)
13.2.3放射渐变 Radialgradients
放射渐变由一个 'radialGradient' 元素来定义. Radial gradients are definedby a'radialGradient' element.
<!ENTITY % radialGradientExt "" >
<!ELEMENT radialGradient (%descTitleMetadata;,(stop|animate|set|animateTransform
%radialGradientExt;)*) >
<!ATTLIST radialGradient
%stdAttrs;
%xlinkRefAttrs;
xlink:href %URI; #IMPLIED
externalResourcesRequired %Boolean; #IMPLIED
class %ClassList; #IMPLIED
style %StyleSheet; #IMPLIED
%PresentationAttributes-Color;
%PresentationAttributes-Gradients;
gradientUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
gradientTransform %TransformList; #IMPLIED
cx %Coordinate; #IMPLIED
cy %Coordinate; #IMPLIED
r %Length; #IMPLIED
fx %Coordinate; #IMPLIED
fy %Coordinate; #IMPLIED
spreadMethod (pad | reflect | repeat) #IMPLIED >
属性定义:Attributedefinitions:
gradientUnits = "userSpaceOnUse |objectBoundingBox"
定义 cx, cy, r, fx, fy 属性的坐标系. Defines the coordinatesystem for attributes cx, cy, r, fx, fy.
如果 gradientUnits="userSpaceOnUse", cx, cy, r, fx, fy 按照当渐变被引用的地方当前用户坐标系来表示其值(即, 在属性'fill' 或'stroke' 上引用渐变元素的元素上的当前用户坐标系) 然后使用由属性gradientTransform指定的变换. If gradientUnits="userSpaceOnUse",cx, cy, r, fx, fy represent values in thecoordinate system that results from taking the current user coordinate systemin place at the time when the gradient element is referenced (i.e., the usercoordinate system for the element referencing the gradient element via a'fill' or 'stroke' property) and then applying the transformspecified by attribute gradientTransform.
如果 gradientUnits="objectBoundingBox", 属性 cx, cy, r, fx, fy 的用户坐标系依照使用渐变的元素的边界框(参见对象边界框单位)来建立 然后使用由属性gradientTransform指定的变换. If gradientUnits="objectBoundingBox",the user coordinate system for attributes cx, cy, r, fx,fy is established using the bounding box of the element to which thegradient is applied (seeObjectbounding box units) and then applying the transform specified by attributegradientTransform.
当 gradientUnits="objectBoundingBox" 并且 gradientTransform 为单位矩阵, 放射渐变的环为在对象边界框空间的圆(即, 理论坐标系 这里 (0,0) 在对象边界框的左上角而(1,1)在对象边界框的右下角)渐变的方向 . 当对象边界框不为正方形时, 由于进行从边界框空间到用户空间的非一致的缩放变换将在概念上在对象边界框空间的圆环渲染成椭圆. When gradientUnits="objectBoundingBox"andgradientTransform is the identity matrix, then therings of the radial gradient are circular with respect to the object boundingbox space (i.e., the abstract coordinate system where (0,0) is at the top/leftof the object bounding box and (1,1) is at the bottom/right of the objectbounding box). When the object's bounding box is not square, the rings that areconceptually circular within object bounding box space will render aselliptical due to application of the non-uniform scaling transformation frombounding box space to user space.
如果不指定属性 gradientUnits , 那么其效果相当于指定了属性的值为 objectBoundingBox . Ifattribute gradientUnits is not specified, then theeffect is as if a value of objectBoundingBox werespecified.
Animatable:yes.
gradientTransform = "<transform-list>"
包含从渐变坐标系到目标坐标系(即,userSpaceOnUse 或objectBoundingBox)可选的附加变换的指定 . 它允许对渐变进行歪斜变换. 此附加的变换与以前定义的变换进行相乘 (即, 插入到右边) , 这以前的变换包括需要从对象边界框单位到用户空间所进行的隐式的变换. Containsthe definitions of an optional additional transformation from the gradientcoordinate system onto the target coordinate system (i.e., userSpaceOnUse orobjectBoundingBox). This allows for things such as skewing the gradient. Thisadditional transformation matrix is post-multiplied to (i.e., inserted to theright of) any previously defined transformations, including the implicittransformation necessary to convert fromobjectbounding box units to user space.
如果不指定属性gradientTransform , 那么效果相当于指定了一个单位变换. If attributegradientTransform is not specified, then theeffect is as if an identity transform were specified.
Animatable:yes.
cx = "<coordinate>"
cx, cy,r 为放射渐变定义一个最大的(即, 最外面的) 圆. 渐变将被绘制使得 100% 渐变关键点映照到最大的(即, 最外面的) 圆的圆周上. cx,cy, r define the largest (i.e., outermost) circle for the radialgradient. The gradient will be drawn such that the 100%gradientstop is mapped to the perimeter of this largest (i.e., outermost) circle.
如果不指定此属性, 其效果相当于其值为"50%". If the attribute is not specified, the effect is as if a value of"50%" were specified.
Animatable:yes.
cy = "<coordinate>"
参见cx.
如果不指定此属性, 其效果相当于其值为"50%". If the attribute is not specified, theeffect is as if a value of "50%" were specified.
Animatable:yes.
r = "<length>"
参见cx.
负值为一错误 (参见 错误处理).值为零时将使得此区域按照最后的渐变关键点的颜色和透明度所确定的单一颜色来绘制. A negative value is an error (seeErrorprocessing). A value of zero will cause the area to be painted as a singlecolor using the color and opacity of the lastgradient stop.
如果不指定此属性, 其效果相当于其值为"50%". If the attribute is not specified, theeffect is as if a value of "50%" were specified.
Animatable:yes.
fx = "<coordinate>"
fx, fy 定义放射渐变的焦点. 渐变将被绘制使得 0% 渐变关键点映照到 (fx, fy).fx,fy define the focal point for the radial gradient. The gradient willbe drawn such that the 0%gradient stop is mappedto (fx, fy).
如果不指定属性 fx, fx将与cx一致. If attribute fx is not specified, fxwill coincide withcx.
Animatable:yes.
fy = "<coordinate>"
参见fx.
如果不指定属性 fy, fy将与cy一致. If attribute fy is not specified, fywill coincide withcy.
Animatable:yes.
spreadMethod = "pad | reflect | repeat"
表示当渐变在被渐变绘制的对象的边界内部开始或结束时将会发生什么. 与'linearGradient' 元素的spreadMethod属性具有同样的值和意义. Indicates what happens if the gradient starts or endsinside the bounds of the object(s) being painted by the gradient. Has the samevalues and meanings as thespreadMethod attribute on 'linearGradient' element.
Animatable:yes.
xlink:href = "<uri>"
指向当前精图文档片段内的不同的'linearGradient' 或 'radialGradient' 元素的 URI 引用.任何在引用元素中定义而在此元素上未定义的'radialGradient' 属性将被此元素所继承. 如果此元素未定义渐变关键点, 而引用元素定义了 (也许是由于它本身的 href 属性), 那么此元素从引用元素那里继承渐变关键点. 继承可以间接通过多级进行; 于是, 如果引用元素通过它自己的href 属性继承属性和渐变关键点, 那么当前元素也可以继承那些属性和渐变关键点. AURIreference to a different 'linearGradient'or 'radialGradient' element within the currentSVG document fragment. Any 'radialGradient'attributes which are defined on the referenced element which are not defined onthis element are inherited by this element. If this element has no definedgradient stops, and the referenced element does (possibly due to its own href attribute), then this element inherits the gradientstop from the referenced element. Inheritance can be indirect to an arbitrarylevel; thus, if the referenced element inherits attribute or gradient stops dueto its own href attribute, then the currentelement can inherit those attributes or gradient stops.
Animatable:yes.
在别处定义的属性:Attributesdefined elsewhere:
%stdAttrs;,%xlinkRefAttrs;,externalResourcesRequired,%PresentationAttributes-Color;,%PresentationAttributes-Gradients;.
属性 cx, cy, r, fx 和 fy可以使用百分比. 对于 gradientUnits="userSpaceOnUse"而言, 百分比表示相对于当前视口的值. 而对于 gradientUnits="objectBoundingBox" 而言, 百分比表示相对于此对象的边界框的值. Percentages are allowed for attributescx,cy, r, fx and fy. For gradientUnits="userSpaceOnUse",percentages represent values relative to the current viewport. ForgradientUnits="objectBoundingBox",percentages represent values relative to the bounding box for the object.
如果由 fx和fy定义的点位于由cx,cy 和 r 定义的圆的外面, 那么用户代理应该将焦点设置成从(cx,cy)到(fx,fy) 的直线段与由 cx, cy 和 r 定义的圆周的交点. If the pointdefined by fx and fy lies outside the circle defined by cx, cy and r, then the user agent shall set the focal point tothe intersection of the line from (cx,cy) to (fx,fy) with the circle defined by cx, cy and r.
'radialGradient' 元素可以从其祖先继承性质 ; 但不能从引用 'radialGradient' 元素的元素中继承性质. Propertiesinherit into the 'radialGradient' element fromits ancestors; properties do not inherit from the element referencingthe 'radialGradient' element.
决不会直接对'radialGradient' 元素进行渲染; 它们唯一的用法是如通过 'fill' 或'stroke' 属性所进行的引用. 'display' 属性不能用于'radialGradient' 元素 ; 于是, 'radialGradient'元素不会被直接渲染即使 'display' 被设置未非none的值, 并且当在'radialGradient' 元素上或它的祖先上'display' 属性的值被设置为none 'radialGradient' 元素仍然可以被引用. 'radialGradient' elementsare never rendered directly; their only usage is as something that can bereferenced using the'fill' and'stroke' properties. The 'display' property does not apply to the 'radialGradient' element; thus, 'radialGradient' elements are not directly renderedeven if the'display' property is set to a value other than none, and 'radialGradient'elements are available for referencing even when the'display' property on the 'radialGradient'element or any of its ancestors is set to none.
例子 radgrad01 说明如何通过引用一放射渐变绘制服务器填充一个矩形. Example radgrad01 shows how to filla rectangle by referencing a radial gradient paint server.
<?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="8cm" height="4cm" viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg">
<desc>Example radgrad01 - fill a rectangle by referencing a
radial gradient paint server</desc>
<g>
<defs>
<radialGradient id="MyGradient" gradientUnits="userSpaceOnUse"
cx="400" cy="200" r="300" fx="400" fy="200">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="blue" />
<stop offset="100%" stop-color="red" />
</radialGradient>
</defs>
<!-- Outline the drawing area in blue -->
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="398"/>
<!-- The rectangle is filled using a radial gradient paint server -->
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5"
x="100" y="100" width="600" height="200"/>
</g>
</svg>
Example radgrad01
View thisexample as SVG (SVG-enabled browsers only)
13.2.4 渐变关键点 Gradient stops
在渐变中使用的颜色的斜坡是通过 'linearGradient'元素或 'radialGradient'元素的子元素 'stop'来定义的. The ramp of colorsto use on a gradient is defined by the'stop' elements thatare child elements to either the'linearGradient'element or the 'radialGradient'element.
<!ENTITY % stopExt "" >
<!ELEMENT stop (animate|set|animateColor
%stopExt;)* >
<!ATTLIST stop
%stdAttrs;
class %ClassList; #IMPLIED
style %StyleSheet; #IMPLIED
%PresentationAttributes-Color;
%PresentationAttributes-Gradients;
offset %NumberOrPercentage; #REQUIRED >
属性定义:Attributedefinitions:
offset = "<number>|<percentage>"
offset 属性要么是一个 <数>(通常范围从 0 到 1) 或者为一个<百分数>(通常范围从 0% 到 100%) 表示渐变关键点所在的地方. 对于线性渐变而言, offset 属性表示沿着渐变矢量所在的位置 . 对于放射渐变而言, 它表示一个从 (fx,fy)到最外面/最大的圆周的距离的百分比. The offset attribute iseither a <number>(usually ranging from 0 to 1) or a <percentage>(usually ranging from 0% to 100%) which indicates where the gradient stop isplaced. For linear gradients, the offset attributerepresents a location along thegradient vector. For radial gradients,it represents a percentage distance from (fx,fy) to the edge of theoutermost/largest circle.
Animatable:yes.
在别处定义的属性:Attributesdefined elsewhere:
%stdAttrs;,class,style,%PresentationAttributes-Color;,%PresentationAttributes-Gradients;.
'stop-color' 属性表示何种颜色将用于渐变的关键点. 关键词 currentColor 和 ICC 颜色可以按相同的方式作为 'fill' 和'stroke' 属性的<paint>说明来指定. The 'stop-color' property indicates what color touse at that gradient stop. The keyword currentColorand ICC colors can be specified in the same manner as within a<paint>specification for the 'fill' and 'stroke' properties.
'stop-color'
Value:
currentColor |
<color> [icc-color(<name>[,<icccolorvalue>]*)] |
inherit
Initial:
black
Applies to:
'stop' elements
Inherited:
no
Percentages:
N/A
Media:
visual
Animatable:
yes
'stop-opacity' 属性设置给定渐变关键点的不透明度.The 'stop-opacity' property defines the opacity of a givengradient stop.
'stop-opacity'
Value:
<alphavalue> | inherit
Initial:
1
Applies to:
'stop' elements
Inherited:
no
Percentages:
N/A
Media:
visual
Animatable:
yes
关于渐变的一些注记:Some notes on gradients:
- 小于0 (或小于 0%)的渐变偏移值将上舍入为 0%. 大于1 (或大于 100%)的渐变偏移值将下舍入为 100%. Gradient offset values less than 0 (or less than 0%) are rounded up to 0%. Gradient offset values greater than 1 (or greater than 100%) are rounded down to 100%.
- 要有渐变效果必须至少定义两个关键点. 如果没有定义关键点, 则绘制效果相当于绘制样式指定为 'none' . 如果只定义了一个关键点, 则将使用此渐变关键点指定固定的颜色填充的方式进行绘制. It is necessary that at least two stops defined to have a gradient effect. If no stops are defined, then painting shall occur as if 'none' were specified as the paint style. If one stop is defined, then paint with the solid color fill using the color defined for that gradient stop.
- 每个渐变偏移值必须不小于上一个渐变关键点的渐变偏移值. 如果给定的渐变关键点的偏移值小于以前的所有偏移值, 则此偏移值将被调整为所有以前的偏移值的最大值. Each gradient offset value is required to be equal to or greater than the previous gradient stop's offset value. If a given gradient stop's offset value is not equal to or greater than all previous offset values, then the offset value is adjusted to be equal to the largest of all previous offset values.
- 如果两个渐变关键点具有相同的偏移值, 则较后的渐变关键点将在交叠点控制颜色值. 特别: If two gradient stops have the same offset value, then the latter gradient stop controls the color value at the overlap point. In particular:
·
· <stop offset="0" stop-color="white"/>
· <stop offset=".2" stop-color="red"/>
· <stop offset=".2" stop-color="blue"/>
· <stop offset="1" stop-color="black"/>
将与下面具有几乎相同的效果: will have approximately the same effect as:
<stop offset="0" stop-color="white"/>
<stop offset=".1999999999" stop-color="red"/>
<stop offset=".2" stop-color="blue"/>
<stop offset="1" stop-color="black"/>
这里是一个从白到红的光滑的渐变, 然后突然从红变成蓝, 最后又光滑地从蓝变成黑. which is agradient that goes smoothly from white to red, then abruptly shifts from red toblue, and then goes smoothly from blue to black.
13.3 模样 Patterns
模样是用来填充或描边一个对象的预先定义的图形对象，它可以以 x 和y 固定的间隔重复("平铺")覆盖将被绘制的区域. 模样通过 'pattern' 元素来定义而由在一给定图形元素上的属性'fill' 和'stroke' 加以引用，此引用表明给定的元素将用引用的模样来填充和描边. A pattern is used to fill or stroke an objectusing a pre-defined graphic object which can be replicated ("tiled")at fixed intervals in x and y to cover the areas to bepainted. Patterns are defined using a 'pattern'element and then referenced by properties'fill' and 'stroke' on a given graphicselement to indicate that the given element shall be filled or stroked withthe referenced pattern.
属性 x, y, width, height 和patternUnits 定义一个在无限画布上的参考矩形. 此参考矩形的左上角在 (x,y) 而它的右下角在 (x+width,y+height). 理论上平铺可以在X和Y(正的和负的)平面上扩展一系列这样的矩形到无限 , 对于每一个可能的整数m 和 n矩形的起点为 (x + m*width, y + n*height) . Attributes x, y, width, height and patternUnits define a reference rectangle somewhereon the infinite canvas. The reference rectangle has its top/left at (x,y) and its bottom/right at (x+width,y+height). The tiling theoretically extends a seriesof such rectangles to infinity in X and Y (positive and negative), withrectangles starting at (x + m*width, y + n*height) for each possible integer value for mand n.
<!ENTITY % patternExt "" >
<!ELEMENT pattern (desc|title|metadata|defs|
path|text|rect|circle|ellipse|line|polyline|polygon|
use|image|svg|g|view|switch|a|altGlyphDef|
script|style|symbol|marker|clipPath|mask|
linearGradient|radialGradient|pattern|filter|cursor|font|
animate|set|animateMotion|animateColor|animateTransform|
color-profile|font-face
%ceExt;%patternExt;)* >
<!ATTLIST pattern
%stdAttrs;
%xlinkRefAttrs;
xlink:href %URI; #IMPLIED
%testAttrs;
%langSpaceAttrs;
externalResourcesRequired %Boolean; #IMPLIED
class %ClassList; #IMPLIED
style %StyleSheet; #IMPLIED
%PresentationAttributes-All;
viewBox %ViewBoxSpec; #IMPLIED
preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet'
patternUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
patternContentUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
patternTransform %TransformList; #IMPLIED
x %Coordinate; #IMPLIED
y %Coordinate; #IMPLIED
width %Length; #IMPLIED
height %Length; #IMPLIED >
属性定义:Attributedefinitions:
patternUnits ="userSpaceOnUse |objectBoundingBox"
定义属性x, y, width, height的坐标系. Defines the coordinatesystem for attributes x, y, width, height.
如果 patternUnits="userSpaceOnUse", x, y, width, height 按照当前用户坐标系来表示值， 当前用户坐标系指的是引用此模样'pattern' 元素 的元素的坐标系(即, 通过'fill' 或'stroke' 属性引用此模样'pattern' 元素的元素的坐标系) 然后应用由属性 patternTransform指定的变换. If patternUnits="userSpaceOnUse",x, y, width, height represent values in thecoordinate system that results from taking the current user coordinate systemin place at the time when the 'pattern' elementis referenced (i.e., the user coordinate system for the element referencing the'pattern' element via a 'fill' or 'stroke' property) and then applying the transformspecified by attribute patternTransform.
如果 patternUnits="objectBoundingBox", 属性 x, y, width, height 的用户坐标系依照使用模样的元素的边界框(参见对象边界框单位)来建立 然后使用由属性patternTransform指定的变换. If patternUnits="objectBoundingBox",the user coordinate system for attributes x, y, width,height is established using the bounding box of the element to which thepattern is applied (seeObjectbounding box units) and then applying the transform specified by attributepatternTransform.
如果不指定属性 patternUnits , 那么其效果相当于指定了属性的值为 objectBoundingBox .If attribute patternUnits is not specified, then the effect is as ifa value of objectBoundingBox were specified.
Animatable:yes.
patternContentUnits = "userSpaceOnUse |objectBoundingBox"
定义模样'pattern'的内容的坐标系. 请注意如果指定了视口属性 viewBox 则此属性无效. Defines the coordinate system for the contents of the 'pattern'. Note that this attribute has no effect ifattributeviewBox is specified.
如果 patternContentUnits="userSpaceOnUse", 模样 'pattern'元素的内容的用户坐标系， 此用户坐标系指的是引用此模样 'pattern' 元素 的元素的坐标系(即, 通过'fill' 或'stroke' 属性引用此模样'pattern' 元素的元素的坐标系) 然后应用由属性 patternTransform指定的变换. If patternContentUnits="userSpaceOnUse",the user coordinate system for the contents of the 'pattern'element is the coordinate system that results from taking the current usercoordinate system in place at the time when the 'pattern'element is referenced (i.e., the user coordinate system for the elementreferencing the 'pattern' element via a'fill' or'stroke' property) and then applying the transformspecified by attribute patternTransform.
如果 patternContentUnits="objectBoundingBox", 模样 'pattern'元素的内容的用户坐标系依照使用模样的元素的边界框(参见对象边界框单位)来建立 然后使用由属性patternTransform指定的变换. If patternContentUnits="objectBoundingBox",the user coordinate system for the contents of the 'pattern'element is established using the bounding box of the element to which thepattern is applied (seeObjectbounding box units) and then applying the transform specified by attributepatternTransform.
如果不指定属性 patternContentUnits , 那么其效果相当于指定了属性的值为 userSpaceOnUse .If attribute patternContentUnits is not specified, then the effect isas if a value of userSpaceOnUse were specified.
Animatable:yes.
patternTransform = "<transform-list>"
包含从模样坐标系到目标坐标系(即,userSpaceOnUse 或objectBoundingBox)可选的附加变换的指定 . 它允许对模样进行歪斜变换. 此附加的变换与以前定义的变换进行相乘 (即, 插入到右边) , 这以前的变换包括需要从对象边界框单位到用户空间所进行的隐式的变换. Contains thedefinition of an optional additional transformation from the pattern coordinatesystem onto the target coordinate system (i.e., userSpaceOnUse orobjectBoundingBox). This allows for things such as skewing the pattern tiles.This additional transformation matrix is post-multiplied to (i.e., inserted tothe right of) any previously defined transformations, including the implicittransformation necessary to convert fromobjectbounding box units to user space.
如果不指定属性patternTransform , 那么效果相当于指定了一个单位变换. If attributepatternTransform is not specified, then the effectis as if an identity transform were specified.
Animatable:yes.
x = "<coordinate>"
x, y,width, height 表示模样片如何安放和预留间隔. 这些属性依照由属性patternUnits和patternTransform的组合所确定坐标空间表示坐标和值 .x, y, width, height indicate how the patterntiles are placed and spaced. These attributes represent coordinates and valuesin the coordinate space specified by the combination of attributespatternUnits and patternTransform.
如果此属性不被指定, 那么效果相当于指定了零值.If the attribute is notspecified, the effect is as if a value of zero were specified.
Animatable:yes.
y = "<coordinate>"
参见x.Seex.
如果此属性不被指定, 那么效果相当于指定了零值.If the attribute is notspecified, the effect is as if a value of zero were specified.
Animatable:yes.
width = "<length>"
参见x.Seex.
负值为一错误 (参见 错误处理).值为零时不对此元素进行渲染(即, 不执行任何绘制).A negative value is anerror (see Errorprocessing). A value of zero disables rendering of the element (i.e., nopaint is applied).
如果此属性不被指定, 那么效果相当于指定了零值.If the attribute is notspecified, the effect is as if a value of zero were specified.
Animatable:yes.
height = "<length>"
参见x.Seex.
负值为一错误 (参见 错误处理).值为零时不对此元素进行渲染(即, 不执行任何绘制).A negative value is anerror (see Errorprocessing). A value of zero disables rendering of the element (i.e., nopaint is applied).
如果此属性不被指定, 那么效果相当于指定了零值.If the attribute is notspecified, the effect is as if a value of zero were specified.
Animatable:yes.
xlink:href = "<uri>"
指向当前精图文档片段内的不同的'pattern' 元素的 URI 引用.任何在引用元素中定义而在此元素上未定义的任何属性将被此元素所继承. 如果此元素无子元素, 而引用元素却有子元素 (也许是由于它本身的 href 属性), 那么此元素从引用元素那里继承这些子元素. 继承可以间接通过多级进行; 于是, 如果引用元素通过它自己的href 属性继承属性和子元素, 那么当前元素也可以继承那些属性和子元素. AURIreference to a different 'pattern' elementwithin the current SVG document fragment. Any attributes which are defined onthe referenced element which are not defined on this element are inherited bythis element. If this element has no children, and the referenced element does(possibly due to its own href attribute), thenthis element inherits the children from the referenced element. Inheritance canbe indirect to an arbitrary level; thus, if the referenced element inheritsattributes or children due to its own hrefattribute, then the current element can inherit those attributes or children.
Animatable:yes.
在别处定义的属性:Attributesdefined elsewhere:
%stdAttrs;,%langSpaceAttrs;,class,%testAttrs;,externalResourcesRequired,viewBox,preserveAspectRatio,%xlinkRefAttrs;,style,%PresentationAttributes-All;.
精图的 用户代理样式表设置'pattern' 元素的 'overflow' 属性为 hidden, 这时在模样片的边界会产生一个矩形剪切路径. 除非 'overflow' 属性为 overridden, 在模样内的任何图形如果位于模样矩形的外面则被剪切掉.下列 例子pattern01 说明了对模样片进行剪切的效果. SVG's useragent style sheet sets the 'overflow' property for 'pattern'elements to hidden, which causes a rectangularclipping path to be created at the bounds of the pattern tile. Unless the'overflow' property is overridden, any graphicswithin the pattern which goes outside of the pattern rectangle will be clipped.Examplepattern01 below shows the effect of clipping to the pattern tile.
'pattern' 的内容是相对于一个新的坐标系的. 如果存在一个 viewBox 属性, 那么新的坐标系适合由x,y,width, height 和在'pattern' 元素上的patternUnits属性通过使用关于viewBox 和preserveAspectRatio的标准规则所定义的区域. 如果不存在一个viewBox 属性, 那么新的坐标系其原点在(x,y), 这里 x 由 'pattern'元素上的 x 属性确定,而 y 由 'pattern'元素上的 y 属性确定. 于是, 在下列例子: The contents ofthe 'pattern' are relative to a new coordinatesystem. If there is aviewBox attribute, then the new coordinate system isfitted into the region defined by thex,y, width, height and patternUnits attributes on the 'pattern' element using the standard rules forviewBox andpreserveAspectRatio. If there is no viewBox attribute, then the new coordinate systemhas its origin at (x,y), where x is established by thex attribute on the 'pattern'element, and y is established by the y attribute on the 'pattern'element. Thus, in the following example:
<pattern x="10" y="10" width="20" height="20">
<rect x="5" y="5" width="10" height="10"/>
</pattern>
此矩形的左上角位于模样片的原点向右5单位向下5单位. the rectangle hasits top/left located 5 units to the right and 5 units down from the origin ofthe pattern tile.
viewBox 属性引入一种用于任何变换的顶部的附加的变换, 此变换需要根据属性 x, y, width, height 和patternUnits创建一个新的模样坐标系. TheviewBox attribute introduces a supplementaltransformation which is applied on top of any transformations necessary tocreate a new pattern coordinate system due to attributesx,y, width, height and patternUnits.
'pattern' 元素从其祖先处继承属性;不能从引用模样'pattern'元素的元素处继承属性. Propertiesinherit into the 'pattern' element from its ancestors;properties donot inherit from the element referencing the 'pattern' element.
'pattern' 元素决不会直接进行渲染; 它们唯一的用法是被 'fill' 和'stroke' 属性所引用. 'display' 属性并不用于'pattern' 元素; 于是, 'pattern'元素不被直接进行渲染哪怕 'display' 属性的值不为none, 并且对于引用的元素而言 'pattern' 元素是可用的即使 'pattern' 元素或 其任何祖先上的'display' 属性被设置为none. 'pattern' elements are never rendered directly;their only usage is as something that can be referenced using the'fill' and 'stroke' properties. The 'display' property does not apply to the 'pattern' element; thus, 'pattern'elements are not directly rendered even if the'display' property is set to a value other than none, and 'pattern'elements are available for referencing even when the'display' property on the 'pattern'element or any of its ancestors is set to none.
与 'pattern' 元素的内容相联系的事件性质和事件监听器不被处理; 仅'pattern' 元素的渲染方面被处理. Event attributesandeventlisteners attached to the contents of a 'pattern'element are not processed; only the rendering aspects of 'pattern' elements are processed.
例子 pattern01 说明如何通过引用一个模样绘制服务器填充一个矩形. 注意每个三角形的蓝色描边在左上角被剪裁. 这是由于精图的用户代理样式表设置'pattern' 元素的 'overflow' 属性为 hidden, 这时在模样片的边界会产生一个矩形剪切路径. Example pattern01 shows how to fill a rectangle byreferencing a pattern paint server. Note how the blue stroke of each trianglehas been clipped at the top and the left. This is due to SVG'suser agent stylesheet setting the 'overflow' property for 'pattern'elements to hidden, which causes the pattern tobe clipped to the bounds of the pattern tile.
<?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="8cm" height="4cm" viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="TrianglePattern" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="100"
viewBox="0 0 10 10" >
<path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
</pattern>
</defs>
<!-- Outline the drawing area in blue -->
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="398"/>
<!-- The ellipse is filled using a triangle pattern paint server
and stroked with black -->
<ellipse fill="url(#TrianglePattern)" stroke="black" stroke-width="5"
cx="400" cy="200" rx="350" ry="150" />
</svg>
Example pattern01
View thisexample as SVG (SVG-enabled browsers only)
13.4 文档对象模型接口 DOM interfaces
下列接口定义如下:Thefollowing interfaces are defined below: SVGGradientElement,SVGLinearGradientElement,SVGRadialGradientElement,SVGStopElement, SVGPatternElement.
接口 SVGGradientElement Interface SVGGradientElement
接口SVGGradientElement 是用于 SVGLinearGradientElement 和 SVGRadialGradientElement 的一个基接口. The SVGGradientElementinterface is a base interface used by SVGLinearGradientElementand SVGRadialGradientElement.
IDL 定义 IDLDefinition
interface SVGGradientElement :
SVGElement,
SVGURIReference,
SVGExternalResourcesRequired,
SVGStylable,
SVGUnitTypes { // Spread Method Types
const unsigned short SVG_SPREADMETHOD_UNKNOWN = 0;
const unsigned short SVG_SPREADMETHOD_PAD = 1;
const unsigned short SVG_SPREADMETHOD_REFLECT = 2;
const unsigned short SVG_SPREADMETHOD_REPEAT = 3;
readonly attribute SVGAnimatedEnumeration gradientUnits;
readonly attribute SVGAnimatedTransformList gradientTransform;
readonly attribute SVGAnimatedEnumeration spreadMethod;
};
一组平铺方法类型的定义 Definition group Spread Method Types
定义的常量 Defined constants
SVG_SPREADMETHOD_UNKNOWN
此类型不是一个预定义的类型. 企图为这一类型定义一个新的值或者将一个存在的值转换成这一类型都是无效的. The 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_SPREADMETHOD_PAD
对应于值 pad.Corresponds to value pad.
SVG_SPREADMETHOD_REFLECT
对应于值 reflect.Corresponds to value reflect.
SVG_SPREADMETHOD_REPEAT
对应于值 repeat.Corresponds to value repeat.
属性 Attributes
readonly SVGAnimatedEnumeration gradientUnits
对应于给定元素上的性质gradientUnits . 在SVGUnitTypes中定义的常量之一作为其取值. Corresponds to attribute gradientUnitson the given element. Takes one of the constants defined in SVGUnitTypes.
readonly SVGAnimatedTransformList gradientTransform
对应于给定元素上的性质gradientTransform. Corresponds to attribute gradientTransformon the given element.
readonly SVGAnimatedEnumeration spreadMethod
对应于给定元素上的性质spreadMethod. 平铺方法类型之一. Corresponds toattribute spreadMethod on the given element. Oneof the Spread Method Types.
接口 SVGLinearGradientElement Interface SVGLinearGradientElement
接口SVGLinearGradientElement 对应 'linearGradient'元素. The SVGLinearGradientElement interface corresponds tothe 'linearGradient' element.
IDL 定义 IDLDefinition
interface SVGLinearGradientElement : SVGGradientElement { readonly attribute SVGAnimatedLength x1;
readonly attribute SVGAnimatedLength y1;
readonly attribute SVGAnimatedLength x2;
readonly attribute SVGAnimatedLength y2;
};
属性 Attributes
readonly SVGAnimatedLength x1
对应于给定'linearGradient' 元素上的性质x1. Corresponds to attribute x1 on the given 'linearGradient'element.
readonly SVGAnimatedLength y1
对应于给定'linearGradient' 元素上的性质y1 . Corresponds to attribute y1 on the given 'linearGradient'element.
readonly SVGAnimatedLength x2
对应于给定'linearGradient' 元素上的性质x2. Corresponds to attribute x2 on the given 'linearGradient'element.
readonly SVGAnimatedLength y2
对应于给定'linearGradient' 元素上的性质y2. Corresponds to attribute y2 on the given 'linearGradient'element.
接口SVGRadialGradientElement Interface SVGRadialGradientElement
接口SVGRadialGradientElement 对应'radialGradient' 元素. The SVGRadialGradientElement interface corresponds tothe 'radialGradient' element.
IDL 定义 IDLDefinition
interface SVGRadialGradientElement : SVGGradientElement { readonly attribute SVGAnimatedLength cx;
readonly attribute SVGAnimatedLength cy;
readonly attribute SVGAnimatedLength r;
readonly attribute SVGAnimatedLength fx;
readonly attribute SVGAnimatedLength fy;
};
属性 Attributes
readonly SVGAnimatedLength cx
对应于给定'radialGradient' 元素上的性质 cx . Corresponds to attribute cx on the given 'radialGradient'element.
readonly SVGAnimatedLength cy
对应于给定'radialGradient' 元素上的性质 cy . Corresponds to attribute cy on the given 'radialGradient'element.
readonly SVGAnimatedLength r
对应于给定'radialGradient' 元素上的性质 r . Corresponds to attribute r on the given 'radialGradient'element.
readonly SVGAnimatedLength fx
对应于给定'radialGradient' 元素上的性质 fx . Corresponds to attribute fx on the given 'radialGradient'element.
readonly SVGAnimatedLength fy
对应于给定'radialGradient' 元素上的性质 fy. Corresponds to attribute fy on the given 'radialGradient'element.
接口SVGStopElement Interface SVGStopElement
接口SVGStopElement 对应 'stop'元素. The SVGStopElement interface corresponds to the 'stop' element.
IDL 定义 IDLDefinition
interface SVGStopElement :
SVGElement,
SVGStylable { readonly attribute SVGAnimatedNumber offset;
};
属性 Attributes
readonly SVGAnimatedNumber offset
对应于给定'stop'元素上的性质offset . Corresponds to attribute offset on the given 'stop'element.
接口SVGPatternElement Interface SVGPatternElement
接口SVGPatternElement 对应 'pattern'元素. The SVGPatternElement interface corresponds to the 'pattern' element.
IDL 定义 IDLDefinition
interface SVGPatternElement :
SVGElement,
SVGURIReference,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGFitToViewBox,
SVGUnitTypes { readonly attribute SVGAnimatedEnumeration patternUnits;
readonly attribute SVGAnimatedEnumeration patternContentUnits;
readonly attribute SVGAnimatedTransformList patternTransform;
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
};
属性 Attributes
readonly SVGAnimatedEnumeration patternUnits
对应于给定'pattern' 元素上的性质 patternUnits . 在SVGUnitTypes中定义的常量之一作为其取值. Corresponds to attributepatternUnits on the given 'pattern' element. Takes one of the constants definedin SVGUnitTypes.
readonly SVGAnimatedEnumeration patternContentUnits
对应于给定'pattern' 元素上的性质patternContentUnits. 在SVGUnitTypes中定义的常量之一作为其取值. Corresponds toattribute patternContentUnits on the given 'pattern' element. Takes one of the constants definedin SVGUnitTypes.
readonly SVGAnimatedTransformList patternTransform
对应于给定'pattern' 元素上的性质patternTransform. Corresponds to attribute patternTransformon the given 'pattern' element.
readonly SVGAnimatedLength x
对应于给定'pattern' 元素上的性质 x . Corresponds to attribute x on thegiven 'pattern' element.
readonly SVGAnimatedLength y
对应于给定'pattern' 元素上的性质 y . Corresponds to attribute y on thegiven 'pattern' element.
readonly SVGAnimatedLength width
对应于给定'pattern' 元素上的性质 width . Corresponds to attribute width onthe given 'pattern' element.
readonly SVGAnimatedLength height
对应于给定'pattern' 元素上的性质height. Corresponds to attribute height onthe given 'pattern' element.
previous next contents elements attributes properties index
- 精图规范1.0----13 渐变和模样 Gradients and Patterns
- CSS3 两种类型的渐变(lineat Gradients线性渐变和Radial Gradients径向渐变)
- css Gradients（渐变）
- CSS3 渐变（Gradients）
- CSS3 渐变（Gradients）
- CSS3 渐变（Gradients）
- css3渐变（Gradients）
- CSS3 渐变（Gradients）
- CSS3渐变（Gradients）
- Drawing Gradients（绘制渐变）
- CSS3 Linear Gradients (线性渐变)
- 精图规范1.0----7 坐标系, 变换和单位Coordinate Systems, Transformations and Units
- 精图规范1.0----14 剪裁、蒙版和合成 Clipping, Masking and Compositing
- 梯度方向直方图和物体检测Histogram of Oriented Gradients and Object Detection
- webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示
- CSS中背景的Linear Gradients（线性渐变）
- 精图规范1.0----11 绘制：填充、描边和标记符号 Painting: Filling, Stroking and Marker Symbols
- Histogram of Oriented Gradients and Object Detection
- Win32使用Psapi库枚举系统进程信息
- 磁盘分区错误，导致分区不能挂载
- ef linq select where dynamic singleordefault
- 通过sql查询rman备份信息
- XML解析的几种方式
- 精图规范1.0----13 渐变和模样 Gradients and Patterns
- 聊以自慰
- Oracle 删除归档日志脚本
- HTML5初探——新增的表单元素和属性
- 对人力资源的小小感想
- POJ训练计划1068_Parencodings(模拟)
- 精图规范1.0----14 剪裁、蒙版和合成 Clipping, Masking and Compositing
- 【memcached】memcached的分布式
- Nexus远程Maven仓库索引下载教程
