previous next contents elements attributes properties index
04 September 2001
11 绘制：填充、描边和标记符号 Painting: Filling, Stroking and Marker Symbols
内容 Contents
- 11.1 引言 Introduction
- 11.2 指定绘制方式 Specifying paint
- 11.3 填充属性 Fill Properties
- 11.4 描边属性 Stroke Properties
- 11.5 控制可见性 Controlling visibility
- 11.6 标记符号 Markers
- 11.7 与渲染有关的属性 Rendering properties
- 11.7.1 颜色插补属性: 'color-interpolation' 和 'color-interpolation-filters' Color interpolation properties: 'color-interpolation' and 'color-interpolation-filters'
- 11.7.2 'color-rendering'属性 The 'color-rendering' property
- 11.7.3 'shape-rendering' 属性 The 'shape-rendering' property
- 11.7.4 'text-rendering' 属性 The 'text-rendering' property
- 11.7.5 'image-rendering' 属性 The 'image-rendering' property
- 11.8 绘制属性的继承 Inheritance of painting properties
- 11.9 文档对象模型接口 DOM interfaces
11.1 引言 Introduction
可以对'path' 元素,'text' 元素和 基本形状 进行 填充 (这意味着绘制对象的内部) 和 描边 (这意味着沿着对象的轮廓进行绘制). 填充和描边两者都可以作为更一般的术语绘制操作来考虑. 'path' elements,'text' elements and basic shapes can be filled(which means painting the interior of the object) andstroked(which means painting along the outline of the object). Filling and strokingboth can be thought of in more general terms aspaintingoperations.
某些元素 (即, 'path', 'polyline', 'polygon' 和'line' 元素) 也可以在它们的顶点上绘制标记符号 . Certainelements (i.e., 'path', 'polyline', 'polygon' and 'line' elements) can also have marker symbolsdrawn at their vertices.
在精图内, 你可以使用下列方式进行绘制(即, 填充或描边) : With SVG, you can paint (i.e., fill or stroke) with:
- 单一的颜色 a single color
- 渐变(线性的或放射的) a gradient (linear or radial)
- 模样(矢量的或图象, 也许进行平铺) a pattern (vector or image, possibly tiled)
- 经由 扩展性 可用的定制绘制 custom paints available via extensibility
精图使用绘制服务器这一普通想法. 在一个 'fill' 或'stroke' 属性上用一个URI引用来指定绘制服务器.渐变和模样 正是绘制服务器的特定类型. SVG usesthe general notion of a paint server. Paint servers arespecified using aURIreference on a 'fill' or 'stroke' property. Gradients and patternsare just specific types of paint servers.
11.2 指定绘制方式 Specifying paint
属性 'fill' 和'stroke' 取类型<paint>的值 , 它们被详列如下: Properties'fill' and 'stroke' take on a value of type <paint>, which is specified as follows:
| <paint>: | none | |
none
表示不进行任何绘制. Indicates that no paint is applied.
currentColor
表示将使用由'color'属性指定的颜色来进行绘制. 提供这种机制来实现与上级语法比如其它(非精图)XML之间共享颜色性质 . 这种机制允许你在你的HTML中定义一种样式它设置 'color' 属性并且然后将此样式传给精图用户代理使得你的精图文本用相同的颜色进行绘制. Indicates that painting is done using the color specified by the 'color' property. This mechanism is provided tofacilitate sharing of color attributes between parent grammars such as other (non-SVG)XML. This mechanism allows you to define a style in your HTML which sets the'color' property and then pass that style to the SVG user agent so that yourSVG text will draw in the same color.
<color>[icc-color(<name>[,<icccolorvalue>]*)]
<color>是用于绘制当前对象的显式颜色(在 sRGB[SRGB] 颜色空间) . 除了精图包含 公认的颜色关键词的一个扩展列表外精图支持在[CSS2-color-types]中为<color>定义的所有语法选项. 如果提供一种可选的 ICC 颜色规范, 那么用户代理在颜色配置描述数据库中搜索一个颜色配置描述项它的名字描述子与<name>匹配并使用被找到的最后的匹配项. (如果无匹配被发现, 那么就忽略ICC 颜色规范.) <icccolorvalue>的逗号分隔的列表 (具有可选的白色空间) 是一套用<number>表示的ICC-配置-指定的颜色值. (在大多数情况下, <icccolorvalue>的值的范围在 0-到-1之间.) 在支持基于ICC的颜色管理的平台中,icc-color优先于<color> (它在 sRGB 颜色空间). 注意即使提供基于 ICC 颜色的规定在一个RGB颜色空间中同样会出现颜色插补 (参见'color-interpolation' 和'color-interpolation-filters'). 在<icccolorvalue> 中不允许使用百分比. 关于基于 ICC 颜色的更多信息, 参见 颜色配置描述. <color>is the explicit color (in the sRGB[SRGB]color space) to be used to paint the current object. SVG supports all of thesyntax alternatives for <color> defined in [CSS2-color-types],with the exception that SVG contains an expanded list of recognized colorkeywords names. If an optional ICC color specification is provided, thenthe user agent searches the color profile description database for acolorprofile description entry whose name descriptor matches <name> anduses the last matching entry that is found. (If no match is found, then the ICCcolor specification is ignored.) The comma-separated list (with optional whitespace) of<icccolorvalue>'s is a set ofICC-profile-specific color values, expressed as<number>s.(In most cases, the <icccolorvalue>'s will be in therange 0-to-1.) On platforms which support ICC-based color management, theicc-colorgets precedence over the <color> (which is in the sRGB color space). Notethat color interpolation occurs in an RGB color space even if an ICC-basedcolor specification is provided (see'color-interpolation' and 'color-interpolation-filters'). Percentages are notallowed on <icccolorvalue>'s. For more on ICC-basedcolors, refer toColorprofile descriptions.
<uri>
[ none |
currentColor |
<color>[icc-color(<name>[,<icccolorvalue>]*)]
<uri> 告诉你如何 标识 一个 绘制服务器 比如一种渐变, 一种模样或者由一种扩展 (参见 扩展性)所定义定制的绘制 . <uri> 提供用来绘制当前对象的绘制服务器(例如, 一种渐变 或者模样)的 ID . 如果 URI 引用 无效 (例如, 它指向一个不存在的对象或者所指向的对象不是有效的绘制服务器), 那么如果提供<uri>(即, none| currentColor | <color>[icc-color(<name>[,<icccolorvalue>]*)]|inherit) 则使用它所指定的绘制方法; 否则, 此文档是错误的 (参见 错误处理). The <uri> is how you identify a paint server such as agradient, a pattern or a custom paint defined by an extension (seeExtensibility). The<uri> provides the ID of the paint server (e.g., a gradient or a pattern) to beused to paint the current object. If the URIreference is not valid (e.g., it points to an object that doesn't exist orthe object is not a valid paint server), then the paint method following the<uri> (i.e.,none | currentColor | <color>[icc-color(<name>[,<icccolorvalue>]*)]| inherit) is used ifprovided; otherwise, the document is in error (seeErrorprocessing).
11.3 填充属性 Fill Properties
| Value: | <paint> (See Specifying paint) |
| Initial: | black |
| Applies to: | |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
'fill'属性绘制给定图形元素的内部.被绘制的区域由在形状的轮廓线内的任何区域所组成. 要确定形状的内部, 必须考虑所有子路径, 并且按照 'fill-rule' 属性的当前值相关的规则来确定内部. 形状的零宽度几何轮廓线被包含在将要绘制的区域中. The 'fill' propertypaints the interior of the given graphical element. The area to be paintedconsists of any areas inside the outline of the shape. To determine the insideof the shape, all subpaths are considered, and the interior is determinedaccording to the rules associated with the current value of the'fill-rule' property. The zero-width geometricoutline of a shape is included in the area to be painted.
对开子路径的填充操作是这样的填充操作好像一个额外的"关闭路径" 命令被加入到路径中连接此子路径的终点和起点. 于是, 填充操作既可用于在'path'元素中的开的子路径 (即, 无关闭路径命令的子路径) 和'polyline' 元素. The fill operation fills open subpaths by performingthe fill operation as if an additional "closepath" command were addedto the path to connect the last point of the subpath with the first point ofthe subpath. Thus, fill operations apply to both open subpaths within 'path' elements (i.e., subpaths without aclosepath command) and 'polyline' elements.
| Value: | nonzero | evenodd | inherit |
| Initial: | nonzero |
| Applies to: | |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
'fill-rule' 属性表示填充算法此算法确定画布的那些部分被包含在形状的内部. 例如, 不交叉的路径, 非常直观什么区域位于"内部"; 但是, 对于更复杂的路径, 比如路径自交叉或一个子路径包含在另一个路径内, "内部" 的确定并不是显而易见的. The 'fill-rule'property indicates the algorithm which is to be used to determine what parts ofthe canvas are included inside the shape. For a simple, non-intersecting path,it is intuitively clear what region lies "inside"; however, for amore complex path, such as a path that intersects itself or where one subpathencloses another, the interpretation of "inside" is not so obvious.
'fill-rule' 属性提供如何决定形状的内部的两种方法: The 'fill-rule' propertyprovides two options for how the inside of a shape is determined:
nonzero
此规则通过下列方法确定在画布上的一点的"内部性", 即通过在任何方向上从此点到无限划一条射线然后检查那些与射线相交的形状的线段的地方. 计数开始为零, 每当与射线相交的路径线段的方向为从左到右则增加一否则每当与射线相交的路径线段的方向为从右到左则减少一. 在计数完所有交叉之后, 如果结果为零则此点在路径的外部. 否则, 则在内部. 下列绘制解释了此nonzero 规则: This rule determinesthe "insideness" of a point on the canvas by drawing a ray from thatpoint to infinity in any direction and then examining the places where asegment of the shape crosses the ray. Starting with a count of zero, add oneeach time a path segment crosses the ray from left to right and subtract oneeach time a path segment crosses the ray from right to left. After counting thecrossings, if the result is zero then the point isoutside the path.Otherwise, it is inside. The following drawing illustrates thenonzerorule:
Viewthis example as SVG (SVG-enabled browsers only)
evenodd
此规则通过下列方法确定在画布上的一点的"内部性", 即通过在任何方向上从此点到无限划一条射线然后计数那些与射线相交的形状的路径线段的数目. 如果此数为奇数, 此点在内部; 如果为偶数, 此点在外部. 下列绘制解释了此evenodd 规则: This rule determines the "insideness" of apoint on the canvas by drawing a ray from that point to infinity in anydirection and counting the number of path segments from the given shape thatthe ray crosses. If this number is odd, the point is inside; if even, the pointis outside. The following drawing illustrates theevenoddrule:
Viewthis example as SVG (SVG-enabled browsers only)
(注意: 上述解释并未说明当一段路径线段与射线重叠时或者相切时如何处理. 因为可选择任何射线, 一种可能是简单地选择一个不同的射线此射线没有这类交点问题.) (Note: the above explanations do not specify what to do if a path segmentcoincides with or is tangent to the ray. Since any ray will do, one may simplychoose a different ray that does not have such problem intersections.)
| Value: | <opacity-value> | inherit |
| Initial: | 1 |
| Applies to: | |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
'fill-opacity' 指定用于绘制当前对象的内部的绘制操作的不透明度. (参见 绘制形状和文本.) 'fill-opacity' specifies the opacity of thepainting operation used to paint the interior the current object. (SeePaintingshapes and text.)
<opacity-value>
用于填充当前对象的内部的绘制操作的不透明度. 任何不在范围 0.0 (完全透明) 到 1.0 (完全不透明)的值将被钳制到此范围中. (参见 被限制在特定范围的钳制值.) The opacity of the painting operation used to fill the current object. Anyvalues outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will beclamped to this range. (SeeClampingvalues which are restricted to a particular range.)
相关的属性: 'stroke-opacity' 和'opacity'. Related properties:'stroke-opacity' and 'opacity'.
11.4 描边属性 Stroke Properties
下列是一些会对进行描边的元素发生影响的属性. The following are the properties which affect how an elementis stroked.
在所有情况下, 所有描边属性都受到方向性的影响, 例如那些进行破折号模样的, 必须使得描边操作从与图形元素的起点相同的地方开始进行渲染. 特别, 对于'path' 元素, 路径的起点是初始的"moveto"命令的第一点. In allcases, all stroking properties which are affected by directionality, such asthose having to do with dash patterns, must be rendered such that the strokeoperation starts at the same point at which the graphics element starts. Inparticular, for'path' elements, the start of the path is the firstpoint of the initial "moveto" command.
对于描边属性比如破折号模样其计算依赖于沿着图形元素的轮廓行进, 距离计算要求利用精图用户代理的标准的沿路径的距离算法. For stroking properties such as dash patterns whose computations are dependenton progress along the outline of the graphics element, distance calculationsare required to utilize the SVG user agent's standardDistancealong a path algorithms.
当使用一个复杂绘制服务器比如渐变或一种模样进行描边时, 描边操作必须与由当前图形元素的几何所定义的几何形状所呈现的结果保持一致并且将相关的描边属性转换成一个等价的'path' 元素然后用给定的绘制服务器进行填充. When stroking is performed using a complex paintserver, such as a gradient or a pattern, the stroke operation must be identicalto the result that would have occurred if the geometric shape defined by thegeometry of the current graphics element and its associated stroking propertieswere converted to an equivalent 'path' element and then filled using the givenpaint server.
| Value: | <paint> (See Specifying paint) |
| Initial: | none |
| Applies to: | |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
'stroke' 属性沿着给定图形元素的轮廓进行绘制. The 'stroke' property paints along the outline of the givengraphical element.
一个由单个 moveto组成的子路径 (参见 路径) 不被描边. 一个由moveto和lineto到严格相同的位置所构成的子路径或者由一个 moveto和一个 closepath构成的子路径仅当属性'stroke-linecap'设置为 "round"时才能被描边, 此时生成一个以给定点为圆心的圆. A subpath (seePaths) consisting of asingle movetois not stroked. A subpath consisting of a movetoand linetoto the same exact location or a subpath consisting of a movetoand a closepathwill be stroked only if the 'stroke-linecap' property is set to"round", producing a circle centered at the given point.
| Value: | |
| Initial: | 1 |
| Applies to: | |
| Inherited: | yes |
| Percentages: | Yes |
| Media: | visual |
| yes |
在当前对象上描边的宽度. 如果使用百分比, 此值表示相对当前视口的百分比. (参见 单位.) The width ofthe stroke on the current object. If a percentage is used, the value representsa percentage of the current viewport. (SeeUnits.)
当为零值时不绘制描边. 当为负值时为一种错误 (参见 错误处理). A zero value causes no stroke to be painted. A negative value is an error (seeErrorprocessing).
| Value: | butt | round | square | inherit |
| Initial: | butt |
| Applies to: | |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
'stroke-linecap' 指定对一个开的子路径进行描边时其端点所使用的形状. 'stroke-linecap'specifies the shape to be used at the end of open subpaths when they arestroked.
butt
参见如下所画的 . See drawing below.
round
参见如下所画的 . See drawing below.
square
参见如下所画的 . See drawing below.
View thisexample as SVG (SVG- and CSS-enabled browsers only)
| Value: | miter | round | bevel | inherit |
| Initial: | miter |
| Applies to: | |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
'stroke-linejoin' 指定对路径或基本形状进行描边时接头处所使用的形状. 'stroke-linejoin'specifies the shape to be used at the corners of paths or basic shapes whenthey are stroked.
miter
参见如下所画的 . See drawing below.
round
参见如下所画的 . See drawing below.
bevel
参见如下所画的 . See drawing below.
View thisexample as SVG (SVG- and CSS-enabled browsers only)
| Value: | <miterlimit> | inherit |
| Initial: | 4 |
| Applies to: | |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
当两个线段接头处为锐角并且将 'stroke-linejoin'设置成 miter 时, 此时此斜接有可能越过路径的线状描边的厚度. 'stroke-miterlimit' 强加在斜接长度与'stroke-linewidth'比率的限制. When two linesegments meet at a sharp angle and miter joins have beenspecified for'stroke-linejoin',it is possible for the miter to extend far beyond the thickness of the linestroking the path. The 'stroke-miterlimit' imposesa limit on the ratio of the miter length to the'stroke-linewidth'.
<miterlimit>
在斜接长度与'stroke-linewidth'比率的限制.<miterlimit>的值必须不小于1. 其它任何值是一种错误(参见 错误处理). The limit on the ratio of the miter length to the 'stroke-linewidth'. The value of <miterlimit>must be a number greater than or equal to 1. Any other value is an error (seeErrorprocessing).
| Value: | none | <dasharray> | inherit |
| Initial: | none |
| Applies to: | |
| Inherited: | yes |
| Percentages: | yes (see below) |
| Media: | visual |
| yes (non-additive) |
'stroke-dasharray' 控制用于描边的路径的破折号和缺口的模样. <dasharray> 包含一个逗号分隔 (可包含空白符号)<长度>的列表用来指定交替的破折号和缺口的长度. 如果提供奇数个值, 则列表的值被重复从而产生偶数个值. 于是, stroke-dasharray:5,3,2 等价于 stroke-dasharray: 5,3,2,5,3,2. 'stroke-dasharray' controls the pattern of dashesand gaps used to stroke paths.<dasharray> contains alist of comma-separated (with optional white space)<length>sthat specify the lengths of alternating dashes and gaps. If an odd number ofvalues is provided, then the list of values is repeated to yield an even numberof values. Thus, stroke-dasharray: 5,3,2 isequivalent to stroke-dasharray: 5,3,2,5,3,2.
none
表示不使用破折号. 如果描边, 线条以实心绘制. Indicates thatno dashing is used. If stroked, the line is drawn solid.
<dasharray>
包含一个逗号分隔 (可包含空白符号) <长度>的列表,其中每一个可以带一个 单位标识, 包括百分号. 此值表示相对当前视口的百分比的距离. (参见 单位.) 当<length>为负值时为一种错误 (参见 错误处理).当<length>的和为零时, 则按照指定为none 时进行同样的描边渲染. A list of comma-separated <length>'s(with optional white space), each of which can have a unitidentifier , including specification of a percentage. A percentagerepresents a distance as a percentage of the current viewport. (SeeUnits.) A negative<length> value is an error (see Errorprocessing). If the sum of the <length>'sis zero, then the stroke is rendered as if a value of nonewere specified.
| Value: | |
| Initial: | 0 |
| Applies to: | |
| Inherited: | yes |
| Percentages: | see prose |
| Media: | visual |
| yes |
'stroke-dashoffset' 指定破折号模样开始进行破折号的距离. 'stroke-dashoffset'specifies the distance into the dash pattern to start the dash.
当使用百分比, 此值表示相对当前视口的百分比 If a percentage is used, the value represents a percentage of the currentviewport
(参见 单位.) (See Units.)
取值可以为负数. Values can be negative.
| Value: | <opacity-value> | inherit |
| Initial: | 1 |
| Applies to: | |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
'stroke-opacity' 指定用于对当前对象进行描边的绘制操作的不透明度. (参见 绘制形状和文本.) 'stroke-opacity' specifies the opacity of thepainting operation used to stroke the current object. (SeePaintingshapes and text.)
<opacity-value>
用于描边当前对象的绘制操作的不透明度. 任何不在范围 0.0 (完全透明) 到 1.0 (完全不透明)的值将被钳制到此范围中. (参见 被限制在特定范围的钳制值.) The opacity of the painting operation used to stroke the current object. Anyvalues outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will beclamped to this range. (SeeClampingvalues which are restricted to a particular range.)
相关属性: 'fill-opacity' 和'opacity'. Related properties:'fill-opacity' and 'opacity'.
11.5 控制可见性 Controlling visibility
精图使用两种属性, 'display' 和'visibility', 来控制图形元素或(在使用'display' 属性的情况下) 容器元素的可见性. SVG uses two properties, 'display' and 'visibility', to control the visibility of graphicalelements or (in the case of the'display' property) container elements.
两种属性之间的区别如下: The differences between the two properties are as follows:
- 当用于一个容器元素, 设置 'display' 为 none 会使得容器和它的所有子元素变得不可见; 于是, 它作用于将一组元素作为组. 可是, 'visibility'仅用于单独的图形元素. 设置一个 'g' 上的 'visibility' 为 hidden 将使得其子元素不可见只要这些子元素不指定它们自己的 'visibility'属性为 visible . 注意 'visibility' 不 是一种继承属性. When applied to a container element, setting'display' to none causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group.'visibility', however, only applies to individual graphics elements. Setting 'visibility' to hidden on a 'g' will make its children invisible as long as the children do not specify their own'visibility' properties as visible. Note that 'visibility' is not an inheritable property.
- 当设置 'display' 属性 为 none, 那么给定的元素不会成为渲染树的一部分. 可是,将 'visibility' 设置为 hidden, 处理过程仍然出现好像此元素为渲染树的一部分并且仍然占用空间, 但是并不真正渲染到画布上. 这种区别导致关于'tspan', 'tref' 和'altGlyph' 元素 ,事件处理, 边框计算 和 剪切路径的计算方面的不同的结论. 如果在 'tspan', 'tref' 或 'altGlyph' 元素上将 'display' 设置为 none , 那么文本布局的目的将忽略文本字串; 但是, 如果将 'visibility' 设置为 hidden, 此文本字串将用于文本布局 (即, 它将占用空间) 即使它不被渲染在画布上. 忽略事件, 如果将 'display' 设置为 none, 元素不接收事件; 可是, 如果将 'visibility' 设置成 hidden, 元素也许仍然接收事件, 这依赖于 'pointer-events'属性的值. 将'display' 设置为none的图形元素的几何不包含在边框 和 剪切路径 计算中; 可是, 即使将 'visibility' 设置为 hidden, 图形元素的几何仍然对边框和剪切路径的计算起作用. When the 'display' property is set to none, then the given element does not become part of the rendering tree. With'visibility' set to hidden, however, processing occurs as if the element were part of the rendering tree and still taking up space, but not actually rendered onto the canvas. This distinction has implications for the'tspan', 'tref' and 'altGlyph' elements, event processing, for bounding box calculations and for calculation of clipping paths. If 'display' is set to none on a 'tspan', 'tref' or 'altGlyph' element, then the text string is ignored for the purposes of text layout; however, if'visibility' is set to hidden, the text string is used for text layout (i.e., it takes up space) even though it is not rendered on the canvas. Regarding events, if'display' is set to none, the element receives no events; however, if 'visibility' is set to hidden, the element might still receive events, depending on the value of property'pointer-events'. The geometry of a graphics element with 'display' set to none is not included in bounding box and clipping paths calculations; however, even if 'visibility' is to hidden, the geometry of the graphics element still contributes to bounding box and clipping path calculations.
| Value: | inline | block | list-item | |
| Initial: | inline |
| Applies to: | 'svg','g', 'switch', 'a', 'foreignObject', graphics elements (including the 'text' element) and text sub-elements (i.e., 'tspan', 'tref', 'altGlyph', 'textPath') |
| Inherited: | no |
| Percentages: | N/A |
| Media: | all |
| yes |
display的一种值: none 表明此给定元素和它的子元素将不被直接渲染(即, 那些元素不会在渲染树中出现). 除了 none 和 inherit 外的值表明将通过精图代理渲染给定的元素. Avalue of display: none indicates that thegiven element and its children shall not be rendered directly (i.e., thoseelements are not present in the rendering tree). Any value other than none or inherit indicatesthat the given element shall be rendered by the SVG user agent.
'display' 属性仅影响给定元素的直接渲染,而它并不影响被其它元素所引用的元素的渲染. 例如, 在一'path' 元素上设置display: none 将阻止将此元素直接渲染到画布上, 但是此'path' 元素仍然可以被一个'textPath' 元素所引用 ; 进一步, 它的几何仍然用于在路径上的文本的处理即使此'path' 具有属性display: none. The 'display'property only affects the direct rendering of a given element, whereas it doesnot prevent elements from being referenced by other elements. For example,setting display: none on a'path' element will prevent that element fromgetting rendered directly onto the canvas, but the'path' element can still be referenced by a 'textPath' element; furthermore, its geometrywill be used in text-on-a-path processing even if the'path' has display:none.
'display' 属性也影响直接渲染到离屏的画布, 比如关于 蒙版实现模型所出现的情况. 于是, 当一个'mask'的子元素上设置display: none 将阻止给定的子元素成为蒙版的一部分进行渲染. 类似地, 当一个'clipPath' 的子元素上设置display: none 将阻止给定的子元素对剪切路径的影响. The 'display' propertyaffects direct rendering into offscreen canvases also, such as occurs with theimplementation model formasks.Thus, setting display: none on a child of a 'mask' will prevent the given child element frombeing rendered as part of the mask. Similarly, setting display: none on a child of a'clipPath' element will prevent the given childelement from contributing to the clipping path.
具有属性 display: none的元素在文本布局操作中不占据位置, 不接收事件, 并且不参与 边框 和 剪切路径的计算. Elements with display: none do not take upspace in text layout operations, do not receive events, and do not contributetoboundingbox and clippingpaths calculations.
除了本规范中提供的任何附加信息外, 正式的定义是 'display' 属性的CSS2定义. Except for any additional information provided in this specification, thenormative definition is theCSS2definition of the 'display' property.
| Value: | visible | hidden | collapse | inherit |
| Initial: | visible |
| Applies to: | graphics elements (including the 'text' element) and text sub-elements (i.e., 'tspan', 'tref', 'altGlyph', 'textPath' and 'a') |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
visible
当前图形元素是可见的. The current graphics element is visible.
hidden or collapse
当前图形元素是不可见的 (即, 不在画布上进行绘制). Thecurrent graphics element is invisible (i.e., nothing is painted on the canvas).
注意如果在一个 'tspan', 'tref' 或'altGlyph'元素上将'visibility'属性设置为hidden, 那么文本是不可见的但是仍然在文本布局计算中占用位置. Note that if the 'visibility'property is set to hidden on a 'tspan', 'tref' or 'altGlyph' element, then the text is invisiblebut still takes up space in text layout calculations.
依赖于属性'pointer-events'的取值 , 图形元素当将其'visibility' 属性设置为 hidden 时仍然可以接收事件. Depending on the value of property'pointer-events', graphics elements which have their'visibility' property set to hidden still might receive events.
除了本规范中提供的任何附加信息外, 正式的定义是'visibility' 属性的CSS2定义. Except for any additional information provided in this specification, thenormative definition is the CSS2definition of the 'visibility' property.
11.6 标记符号 Markers
11.6.1引言Introduction
一个标记符号是一种与'path','line', 'polyline' 和'polygon' 元素的一个或多个顶点相关联的符号. 典型地,标记符号用来构造一个箭头或者多个标记. 箭头可以通过'path','line' 或'polyline' 元素的起始顶点相关联的标记符号来定义. 而多标记则可以通过'path','line', 'polyline'或'polygon' 元素的所有顶点相关联的标记符号来定义. A marker is a symbol which is attached toone or more vertices of'path', 'line', 'polyline' and 'polygon' elements. Typically, markers are usedto make arrowheads or polymarkers. Arrowheads can be defined by attaching amarker to the start or end vertices of'path', 'line' or 'polyline' elements. Polymarkers can be definedby attaching a marker to all vertices of a'path', 'line', 'polyline' or 'polygon' element.
标记符号的图形通过一个 'marker' 元素来定义. 为了表示在一个特定的'path','line', 'polyline' 或'polygon' 元素的顶点上渲染一种特定的'marker' 元素, 需要设置一个或多个标记符号属性 ('marker','marker-start', 'marker-mid' 或'marker-end') 来引用此给定的'marker' 元素. The graphics for a marker are defined by a'marker' element. To indicate that a particular'marker' element should be rendered at thevertices of a particular 'path', 'line', 'polyline' or 'polygon' element, set one or more markerproperties ('marker','marker-start', 'marker-mid' or 'marker-end') to reference the given 'marker' element.
Example 标记符号 绘制一个三角标记符号作为路径的终点的箭头. Example Marker draws a triangular marker symbol as anarrowhead at the end of a path.
<?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="2in"
viewBox="0 0 4000 2000"
xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="Triangle"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<rect x="10" y="10" width="3980" height="1980"
fill="none" stroke="blue" stroke-width="10" />
<desc>Placing an arrowhead at the end of a path.
</desc>
<path d="M 1000 750 L 2000 750 L 2500 1250"
fill="none" stroke="black" stroke-width="100"
marker-end="url(#Triangle)" />
</svg>
| Example Marker |
View thisexample as SVG (SVG-enabled browsers only)
可以对标记符号执行动画. 动画的效果将呈现在此文档中所有当前引用此标记符号的地方. Markers can be animated. The animated effects will show on all current uses ofthe markers within the document.
11.6.2 'marker' 元素 The 'marker' element
'marker' 元素定义用于在给定的 'path', 'line', 'polyline' 或'polygon' 元素上绘制箭头或多角标记的图形. The'marker' element defines thegraphics that is to be used for drawing arrowheads or polymarkers on a given'path', 'line', 'polyline' or 'polygon' element.
<!ENTITY % markerExt "" > <!ELEMENT marker (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;%markerExt;)* > <!ATTLIST marker %stdAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-All; viewBox %ViewBoxSpec; #IMPLIED preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet' refX %Coordinate; #IMPLIED refY %Coordinate; #IMPLIED markerUnits (strokeWidth | userSpaceOnUse) #IMPLIED markerWidth %Length; #IMPLIED markerHeight %Length; #IMPLIED orient CDATA #IMPLIED > |
属性定义: Attribute definitions:
markerUnits = "strokeWidth | userSpaceOnUse"
为性质markerWidth,markerHeight和此'marker'的内容定义坐标系. Defines thecoordinate system for attributesmarkerWidth, markerHeight and the contents of the 'marker'.
如果 markerUnits="strokeWidth", markerWidth, markerHeight 和此'marker'的内容按这种坐标系表示其值此坐标系具有单一的单位与当前引用此标记符号的图形对象的描边宽度的用户单位中的尺寸一致 (参见'stroke-width' 属性) . If markerUnits="strokeWidth",markerWidth,markerHeight and the contents of the 'marker' represent values in a coordinate systemwhich has a single unit equal the size in user units of the current strokewidth (see the'stroke-width' property) in place for the graphicobject referencing the marker.
如果 markerUnits="userSpaceOnUse", markerWidth, markerHeight 和此'marker'的内容按引用此标记符号的图形对象的当前用户坐标系表示其值 (即, 经由'marker','marker-start', 'marker-mid' 或'marker-end' 属性引用此'marker' 元素的元素的用户坐标系). If markerUnits="userSpaceOnUse",markerWidth, markerHeight and the contents of the 'marker' represent values in the current usercoordinate system in place for the graphic object referencing the marker (i.e.,the user coordinate system for the element referencing the 'marker' element via a'marker', 'marker-start', 'marker-mid' or 'marker-end' property).
如果不指定性质 markerUnits , 那么效果相当于指定其值为 strokeWidth . If attribute markerUnitsis not specified, then the effect is as if a value of strokeWidthwere specified.
Animatable:yes.
refX = "<coordinate>"
引用点的x-轴 坐标此引用点严格与标记符号位置对正 . 此坐标定义在应用viewBox和preserveAspectRatio性质之后的坐标系中. The x-axis coordinate of the reference point which isto be aligned exactly at the marker position. The coordinate is defined in thecoordinate system after application of theviewBox and preserveAspectRatio attributes.
如果不指定此性质, 那么效果相当于指定其值为 "0" . If the attribute is not specified, the effect is as if a value of "0"were specified.
Animatable:yes.
refY = "<coordinate>"
引用点的y-轴 坐标此引用点严格与标记符号位置对正 . 此坐标定义在应用viewBox和preserveAspectRatio性质之后的坐标系中. The y-axis coordinate of the reference point which isto be aligned exactly at the marker position. The coordinate is defined in thecoordinate system after application of theviewBox and preserveAspectRatio attributes.
如果不指定此性质, 那么效果相当于指定其值为 "0" . If the attribute is not specified, the effect is as if a value of "0"were specified.
Animatable:yes.
markerWidth = "<length>"
表示当渲染标记符号时其视口的宽度. Represents the width of the viewport into which the markeris to be fitted when it is rendered.
当为负值时为一种错误 (参见 错误处理). 当为零值时不渲染此元素. Anegative value is an error (see Errorprocessing). A value of zero disables rendering of the element.
如果不指定此性质, 那么效果相当于指定其值为 "3" . If the attribute is not specified, the effect is as if a value of "3"were specified.
Animatable:yes.
markerHeight ="<length>"
表示当渲染标记符号时其视口的高度. Represents the height of the viewport into which the markeris to be fitted when it is rendered.
当为负值时为一种错误 (参见 错误处理). 当为零值时不渲染此元素. Anegative value is an error (see Errorprocessing). A value of zero disables rendering of the element.
如果不指定此性质, 那么效果相当于指定其值为 "3" . If the attribute is not specified, the effect is as if a value of "3"were specified.
Animatable:yes.
orient = "auto |<angle>"
表示如何对标记符号进行旋转. Indicates how the marker is rotated.
值 auto 表示确定标记符号的方向使得它的正向x-轴指向如下: (a) 如果有一路径段进入此顶点而另一路径段离开此顶点, themarker's positive x-axis should point toward the angle bisector for the angleat the given vertex, where that angle has one side consisting of tangent vectorfor the path segment going into the vertex and the other side the tangentvector for the path segment going out of the vertex (note: if the tangentvectors are the same, the angle bisector equals the two tangent vectors), (b)if there is only a path segment going into the vertex (e.g., the last vertex onan open path), the marker's positive x-axis should point in the same directionas the tangent vector for the path segment going into the vertex, (c) if thereis only a path segment going out of the vertex (e.g., the first vertex on anopen path), the marker's positive x-axis should point in the same direction asthe tangent vector for the path segment going out of the vertex. (Refer to'path'element implementation notes for a more thorough discussion of thedirectionality of path segments.) A value ofauto indicates that the marker is oriented such that itspositive x-axis is pointing as follows: (a) if there is a path segment cominginto the vertex and another path segment going out of the vertex, the marker'spositive x-axis should point toward the angle bisector for the angle at thegiven vertex, where that angle has one side consisting of tangent vector forthe path segment going into the vertex and the other side the tangent vectorfor the path segment going out of the vertex (note: if the tangent vectors arethe same, the angle bisector equals the two tangent vectors), (b) if there isonly a path segment going into the vertex (e.g., the last vertex on an openpath), the marker's positive x-axis should point in the same direction as thetangent vector for the path segment going into the vertex, (c) if there is onlya path segment going out of the vertex (e.g., the first vertex on an openpath), the marker's positive x-axis should point in the same direction as thetangent vector for the path segment going out of the vertex. (Refer to 'path'element implementation notes for a more thorough discussion of thedirectionality of path segments.)
在所有闭子路径的情况下 (例如, 以'closepath'命令结束的子路径), 那么对应于子路径的起点的标记符号的方向被计算假设: In all cases for closed subpaths (e.g., subpaths which end with a 'closepath'command), the orientation of the marker corresponding to the initial point ofthe subpath is calculated assuming that:
· 进入此顶点的路径段是对应于闭路径的路径段 the path segment going into the vertex is the path segmentcorresponding to the closepath
· 离开此顶点的路径段是此子路径的第一个路径段 the path segment coming out of the vertex is the firstpath segment in the subpath
当一个非'moveto'命令跟随在一个'closepath'命令的后面, 那么对应于'closepath'命令的标记符号的方向被计算假设: When a'closepath'command is followed by a command other than a 'moveto'command, then the orientation of the marker corresponding to the 'closepath'command is calculated assuming that:
· 进入此顶点的路径段是对应于闭路径的路径段 the path segment going into the vertex is the path segmentcorresponding to the closepath
· 离开此顶点的路径段是随后的子路径的第一个路径段 the path segment coming out of the vertex is thefirst path segment of the subsequent subpath
值 <angle> 表示在引用此标记符号的图形对象的用户空间的一个特定方向. 例如, 如果给定值为 "0" , 那么将会绘制此标记符号使得它的x-轴将与引用此标记符号的图形对象的用户空间的x-轴平行. 如果不指定此性质, 其效果相当于指定其值为"0" . A value of<angle> representsa particular orientation in the user space of the graphic object referencingthe marker. For example, if a value of "0" is given, then the markerwill be drawn such that its x-axis will align with the x-axis of the user spaceof the graphic object referencing the marker. If the attribute is notspecified, the effect is as if a value of "0" were specified.
Animatable:yes (non-additive, 'set' and 'animate' elements only).
在别处定义的属性: Attributesdefined elsewhere:
%stdAttrs;,%langSpaceAttrs;,class,externalResourcesRequired,viewBox,preserveAspectRatio,style,%PresentationAttributes-All;.
绘制标记符号使得它们的引用点(即, 性质 refX 和 refY) 安置在给定的顶点上. 换言之, 用户代理构造一个平移变换使其达到在标记符号的内容的坐标系(在由于viewBox 和preserveAspectRatio性质所进行的任何变换之后) 的点(refX 和refY)严格与给定的顶点对正的效果. Markers are drawn such that their reference point(i.e., attributesrefX and refY) is positioned at the given vertex. In otherwords, a translation transformation is constructed by the user agent to achievethe effect of having point (refX and refY) within the marker content's coordinate system(after any transformations due to theviewBox and preserveAspectRatio attributes) align exactly withthe given vertex.
精图的 用户代理样式表将 'marker' 元素的 'overflow' 属性设置为hidden , 这样就会在标记符号的边界生成一个矩形的剪切路径. 除非将 'overflow' 属性设置为 overridden, 在标记符号内的超出标记符号矩形之外的任何图形都会被剪切掉. SVG's user agent stylesheet sets the 'overflow' property for 'marker'elements to hidden, which causes a rectangularclipping path to be created at the bounds of the marker tile. Unless the'overflow' property is overridden, any graphicswithin the marker which goes outside of the marker rectangle will be clipped.
'marker' 的内容是相对于一个新的坐标系的. 性质 markerUnits 确定了将标记符号中的图形变换成引用元素的用户坐标系的初始比例因子. 如果 'marker'元素包含性质viewBox一组附加的变换会出现, 在这种情况下由于要处理性质viewBox 和preserveAspectRatio 将对'marker' 内容的坐标系进行变换. 如果不包含viewBox 性质, 那么假定其 viewBox性质的缺省值具有视口的原点和viewBox的原点一致并且视口的高宽与viewBox的高宽一致. The contents of the 'marker'are relative to a new coordinate system. AttributemarkerUnits determines an initial scale factor fortransforming the graphics in the marker into the user coordinate system for thereferencing element. An additional set of transformations might occur if thereis aviewBox attribute, in which case the coordinatesystem for the contents of the 'marker' will betransformed due to the processing of attributesviewBox and preserveAspectRatio. If there is no viewBox attribute, then the assumed default valuefor the the viewBox attribute has the origin of the viewBoxcoincident with the origin of the viewport and the width/height of the viewBoxthe same as the width/height of the viewport.
可以从 'marker' 元素的祖先处进行属性 继承; 但不能从引用'marker' 元素的元素中进行属性继承. Propertiesinherit into the 'marker' element from itsancestors; properties do not inherit from the element referencing the 'marker' element.
决不会直接对'marker' 元素进行渲染; 它们唯一的用法是作为可以被 'marker', 'marker-start', 'marker-end' 和'marker-mid'属性所引用.'display' 属性不能用于'marker' 元素; 于是, 'marker'元素不被直接渲染哪怕 将 'display' 属性设置为非none的值 , 并且'marker' 元素是可以被引用的即使 'marker' 元素或其祖先上的 'display' 属性其值设为 none. 'marker'elements are never rendered directly; their only usage is as something that canbe referenced using the'marker', 'marker-start', 'marker-end' and 'marker-mid' properties. The 'display' property does not apply to the 'marker' element; thus, 'marker'elements are not directly rendered even if the'display' property is set to a value other than none, and 'marker'elements are available for referencing even when the'display' property on the 'marker'element or any of its ancestors is set to none.
与'marker' 元素的内容联系的事件性质和事件监听器不被处理; 仅仅'marker'元素的渲染方面被处理. Eventattributes and eventlisteners attached to the contents of a 'marker'element are not processed; only the rendering aspects of 'marker' elements are processed.
11.6.3Marker properties
'marker-start' 定义用于给定的'path' 元素或基本形状的第一个顶点上进行绘制的箭头或多角标记.'marker-end' 定义用于给定的'path' 元素或基本形状的最后一个顶点上进行绘制的箭头或多角标记.'marker-mid' 定义用于每一其它顶点(即, 除了第一个和最后一个的每一个顶点)上进行绘制的箭头或多角标记 . 注意结束于一个封闭的子路径的 'path' 元素, 在给定的子路径上最后的顶点与最初的顶点同一. 此时, 如果不将 'marker-end' 设置为none, 那么可能在此特定的顶点上渲染两个标记符号. 阻止这种情况发生的一种方法是将 'marker-end' 设置为none. (注意针对'polygon' 元素的相同评论.) 'marker-start' defines the arrowhead or polymarkerthat shall be drawn at the first vertex of the given'path' element or basic shape. 'marker-end' defines the arrowhead or polymarkerthat shall be drawn at the final vertex.'marker-mid' defines the arrowhead or polymarkerthat shall be drawn at every other vertex (i.e., every vertex except the firstand last). Note that for a'path' element which ends with a closed sub-path,the last vertex is the same as the initial vertex on the given sub-path. Inthis case, if'marker-end' does not equal none,then it is possible that two markers will be rendered on the given vertex. Oneway to prevent this is to set'marker-end' to none.(Note that the same comment applies to 'polygon' elements.)
'marker-start', 'marker-end',marker-mid'
| Value: | none | |
| Initial: | none |
| Applies to: | 'path','line', 'polyline' and 'polygon' elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
none
表示在给定的顶点上不绘制任何标记符号. Indicates that no marker symbol shall be drawn at thegiven vertex (vertices).
<uri>
<uri> 是一种对此 'marker' 元素 URI 引用 而此标记元素将用在给定的顶点上作为箭头符号或多角符号. 如果此 URI 引用 无效 (例如, 它指向一个未定义的对象 或者指向一个非 'marker' 元素的对象), 那么此标记符号不被绘制. The<uri> is aURIreference to the 'marker' element whichshall be used as the arrowhead symbol or polymarker at the given vertex orvertices. If theURIreference is not valid (e.g., it points to an object that is undefined orthe object is not a 'marker' element), then themarker(s) shall not be drawn.
此 'marker' 属性指定用于在给定的'path' 元素或 基本形状上的所有顶点的标记符号. 它是三种单独的标记符号属性的速记形式: The 'marker' property specifies the marker symbol that shallbe used for all points on the sets the value for all vertices on the given'path'element or basic shape.It is a short-hand for the three individual marker properties:
| Value: | see individual properties |
| Initial: | see individual properties |
| Applies to: | 'path','line', 'polyline' and 'polygon' elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
11.6.4Details on how markers are rendered
标记符号是在给定元素绘制完填充和描边之后进行绘制的. Markers are drawn after the given object is filled andstroked.
对于每个将要进行绘制的标记符号, 将建立一个新的临时的用户坐标系以便正确地安置和调整此标记符号如下: For each marker that is drawn, a temporary new usercoordinate system is established so that the marker will be positioned andsized correctly, as follows:
- 新的临时的用户坐标系的坐标轴按照 'marker' 元素上的 orient 属性与在给定顶点的曲率排列一致.(注意: 如果在顶点处不连续, 曲率为在给定顶点处相接的两个曲线段的曲率的平均值. 如果不能确定曲率, 则假设其为零.) The axes of the temporary new user coordinate system are aligned according to theattribute on theelement and the slope of the curve at the given vertex. (Note: if there is a discontinuity at a vertex, the slope is the average of the slopes of the two segments of the curve that join at the given vertex. If a slope cannot be determined, the slope is assumed to be zero.)
- 新的临时的用户坐标系通过性质markerUnits来建立 . 如果markerUnits 等于 strokeWidth, 那么新的临时的用户坐标系是通过当前用户坐标系乘以当前属性 'stroke-width'的值的结果. 如果 markerUnits 等于 userSpaceOnUse, 那么无须使用额外的比例变换. A temporary new coordinate system is established by attributemarkerUnits. If markerUnits equals strokeWidth, then the temporary new user coordinate system is the result of scaling the current user coordinate system by the current value of property'stroke-width'. If markerUnits equals userSpaceOnUse, then no extra scale transformation is applied.
- 如果 'marker'元素包含性质viewBox一组附加的变换会出现, 在这种情况下附加的变换被建立以便产生由性质viewBox和preserveAspectRatio所规定的必要的结果. An additional set of transformations might occur if the'marker' element includes a viewBox attribute, in which case additional transformations are set up to produce the necessary result due to attributesviewBox and preserveAspectRatio.
- 如果'marker' 元素上的'overflow' 属性表示标记符号需要剪切的视口, 那么一个隐含的在视口边界处的剪切路径被建立. If the 'overflow' property on the 'marker' element indicates that the marker needs to be clipped to its viewport, then an implicit clipping path is established at the bounds of the viewport.
一个标记符号的渲染效果就像为每个此标记符号的实例将此被引用的 'marker' 元素的内容被深度复制到一个分离非暴露的DOM树中. 由于复制树是非暴露的, 故精图的 DOM 并不显示标记符号的复制的实例. Therendering effect of a marker is as if the contents of the referenced'marker' element were deeply cloned into aseparate non-exposed DOM tree for each instance of the marker. Because thecloned DOM tree is non-exposed, the SVG DOM does not show the cloned instanceof the marker.
对于每个支持用 CSS进行格式化的用户代理, 此被引用的'marker' 元素的概念上的深度复制到一棵非暴露DOM树也会将来自CSS层叠[CSS2-CASCADE] 的任何属性值以及在被引用元素的属性继承和它的内容复制过来. CSS2 选择子可以用于原来的(即, 被引用的) 元素 因为它们是正式文档结构的一部分. CSS2 选择子不能用于此复制的(概念上)DOM 树因为它的内容不是正式文档结构的一部分. For user agents that support Styling withCSS, the conceptual deep cloning of the referenced 'marker' element into a non-exposed DOM tree alsocopies any property values resulting from the CSS cascade [CSS2-CASCADE] andproperty inheritance on the referenced element and its contents. CSS2 selectorscan be applied to the original (i.e., referenced) elements because they arepart of the formal document structure. CSS2 selectors cannot be applied to the(conceptually) cloned DOM tree because its contents are not part of the formaldocument structure.
为了说明方便, 我们将重复以前呈现过的标记符号的例子: Forillustrative purposes, we'll repeat the marker example shown earlier:
<?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="2in"
viewBox="0 0 4000 2000"
xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="Triangle"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<rect x="10" y="10" width="3980" height="1980"
fill="none" stroke="blue" stroke-width="10" />
<desc>Placing an arrowhead at the end of a path.
</desc>
<path d="M 1000 750 L 2000 750 L 2500 1250"
fill="none" stroke="black" stroke-width="100"
marker-end="url(#Triangle)" />
</svg>
上面的文件的渲染效果从视觉效果来说与下列文件所定义的效果一致: The rendering effect of the above file will be visuallyidentical to the following:
<?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="2in"
viewBox="0 0 4000 2000"
xmlns="http://www.w3.org/2000/svg">
<desc>File which produces the same effect
as the marker example file, but without
using markers.
</desc>
<rect x="10" y="10" width="3980" height="1980"
fill="none" stroke="blue" stroke-width="10" />
<!-- The path draws as before, but without the marker properties -->
<path d="M 1000 750 L 2000 750 L 2500 1250"
fill="none" stroke="black" stroke-width="100" />
<!-- The following logic simulates drawing a marker
at final vertex of the path. -->
<!-- First off, move the origin of the user coordinate system
so that the origin is now aligned with the end point of the path. -->
<g transform="translate(2500,1250)" >
<!-- Rotate the coordinate system 45 degrees because
the marker specified orient="auto" and the final segment
of the path is going in the direction of 45 degrees. -->
<g transform="rotate(45)" >
<!-- Scale the coordinate system to match the coordinate system
indicated by the 'markerUnits' attributes, which in this case has
a value of 'strokeWidth'. Therefore, scale the coordinate system
by the current value of the 'stroke-width' property, which is 100. -->
<g transform="scale(100)" >
<!-- Translate the coordinate system by
(-refX*viewBoxToMarkerUnitsScaleX, -refY*viewBoxToMarkerUnitsScaleY)
in order that (refX,refY) within the marker will align with the vertex.
In this case, we use the default value for preserveAspectRatio
('xMidYMid meet'), which means find a uniform scale factor
(i.e., viewBoxToMarkerUnitsScaleX=viewBoxToMarkerUnitsScaleY)
such that the viewBox fits entirely within the viewport ('meet') and
is center-aligned ('xMidYMid'). In this case, the uniform scale factor
is markerHeight/viewBoxHeight=3/10=.3. Therefore, translate by
(-refX*.3,-refY*.3)=(0*.3,-5*.3)=(0,-1.5). -->
<g transform="translate(0,-1.5)" >
<!-- There is an implicit clipping path because the user agent style
sheet says that the 'overflow' property for markers has the value
'hidden'. To achieve this, create a clipping path at the bounds
of the viewport. Note that in this case the viewport extends
0.5 units to the left and right of the viewBox due to
a uniform scale factor, different ratios for markerWidth/viewBoxWidth
and markerHeight/viewBoxHeight, and 'xMidYMid' alignment -->
<clipPath id="cp1" >
<rect x="-0.5" y="0" width="4" height="3" />
</clipPath>
<g clip-path="url(#cp1)" >
<!-- Scale the coordinate system by the uniform scale factor
markerHeight/viewBoxHeight=3/10=.3 to set the coordinate
system to viewBox units. -->
<g transform="scale(.3)" >
<!-- This 'g' element carries all property values that result from
cascading and inheritance of properties on the original 'marker' element.
In this example, neither fill nor stroke was specified on the 'marker'
element or any ancestors of the 'marker', so the initial values of
"black" and "none" are used, respectively. -->
<g fill="black" stroke="none" >
<!-- Expand out the contents of the 'marker' element. -->
<path d="M 0 0 L 10 5 L 0 10 z" />
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Viewthis example as SVG (SVG-enabled browsers only)
11.7与渲染有关的属性Rendering properties
11.7.1 颜色插补属性: 'color-interpolation' 和 'color-interpolation-filters' Color interpolation properties: 'color-interpolation' and 'color-interpolation-filters'
精图用户代理当处理精图内容时在各种各样的点上施行颜色插补和合成. 两个属性, 'color-interpolation' 和'color-interpolation-filters', 控制哪一种颜色空间用于图形操作的特定范畴. 下列表格说明哪一种属性用于哪一种图形操作: The SVG user agent performs color interpolations and compositing at variouspoints as it processes SVG content. Two properties,'color-interpolation' and 'color-interpolation-filters', control which colorspace is used for particular categories of graphics operations. The followingtable shows which property applies to which graphics operations:
| 图形操作 Graphics operation | 相应的属性 Corresponding property |
| 渐变关键点间的插补 (参见 渐变) interpolating between gradient stops (see Gradient) | |
| 当执行颜色动画时所进行的颜色插补(参见 'animateColor') interpolating color when performing color animations(see 'animateColor') | |
| 图形元素alpha 合成 到当前的背景 alpha compositing of graphics elements into the current background | |
两种属性选择 出现在 sRGB 颜色空间或者 在一种 (线性光能) 线性的 RGB 颜色空间 之间的颜色操作. Both properties choose between color operations occurring inthesRGB color space or in a (lightenergy linear) linearized RGB color space.
在 sRGB 颜色空间 (即, 非线性具有 2.2 的γ曲线) 和 线性的 RGB 颜色空间 (即, 颜色值用不用γ曲线的sRGB三色的颜色值表示) 之间进行转换的公式可以在 [SRGB]中找到. 为了方便说明, 下列公式说明了从sRGB到线性的RGB间的转换 : The conversionformulas between the sRGB color space (i.e., nonlinear with 2.2 gamma curve)and the linearized RGB color space (i.e., color values expressed as sRGBtristimulus values without a gamma curve) can be found in[SRGB]. For illustrative purposes, thefollowing formula shows the conversion from sRGB to linearized RGB:
R[sRGB] = R[sRGB-8bit] / 255
G[sRGB] = G[sRGB-8bit] / 255
B[sRGB] = B[sRGB-8bit] / 255
If R[sRGB], G[sRGB], B[sRGB] <= 0.04045
R[linearRGB] = R[sRGB] / 12.92
G[linearRGB] = G[sRGB] / 12.92
B[linearRGB] = B[sRGB] / 12.92
else if R[sRGB], G[sRGB], B[sRGB] > 0.04045
R[linearRGB] = ((R[sRGB] + 0.055) / 1.055) ^ 2.4
G[linearRGB] = ((G[sRGB] + 0.055) / 1.055) ^ 2.4
B[linearRGB] = ((B[sRGB] + 0.055) / 1.055) ^ 2.4
R[linearRGB-8bit] = R[linearRGB] * 255
G[linearRGB-8bit] = G[linearRGB] * 255
B[linearRGB-8bit] = B[linearRGB] * 255
如果用户代理支持超出颜色值范围的颜色值同样使用上述公式进行转换. (参见 被限制在特定范围的钳制值.) Out-of-range color values, if supported by the user agent, also are convertedusing the above formulas. (SeeClampingvalues which are restricted to a particular range.)
| Value: | auto | sRGB | linearRGB | inherit |
| Initial: | sRGB |
| Applies to: | |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
auto
表示用户代理可以选择要么为sRGB要么为linearRGB空间来进行颜色插补. 此选项表明作者不要求颜色插补出现在特定的颜色空间中. Indicates that the user agent can choose either thesRGBor linearRGB spaces for color interpolation. This optionindicates that the author doesn't require that color interpolation occur in aparticular color space.
sRGB
表示颜色插补将出现在sRGB颜色空间中. Indicates that color interpolation should occur in the sRGB color space.
linearRGB
表示颜色插补将出现在如上所述的线性RGB颜色空间中. Indicates that color interpolation should occur in the linearized RGB colorspace as described above.
'color-interpolation' 属性指定渐变插补, 颜色动画和 alpha 合成所用的颜色空间. The 'color-interpolation' property specifies the color spacefor gradient interpolations, color animations and alpha compositing.
当一个子元素混合到一个背景中时, 混合的类型是由子元素的 'color-interpolation' 属性的值 确定的, 而不是由父元素的 'color-interpolation' 的值所确定的. 对于使用xlink:href 性质引用另一个渐变的渐变 而言, 此渐变使用来自直接被'fill' 或'stroke' 属性所引用的渐变元素的'color-interpolation' 属性值. 当进行颜色动画时, 则按照进行动画的元素的'color-interpolation'属性的值来执行颜色的插补. When a child element is blended into a background, the value of the 'color-interpolation' property on the child determinesthe type of blending, not the value of the 'color-interpolation'on the parent. Forgradientswhich make use of the xlink:href attribute to reference another gradient,the gradient uses the 'color-interpolation'property value from the gradient element which is directly referenced by the'fill' or 'stroke' property. When animating colors, colorinterpolation is performed according to the value of the 'color-interpolation'property on the element being animated.
| Value: | auto | sRGB | linearRGB | inherit |
| Initial: | linearRGB |
| Applies to: | |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
auto
表示用户代理可以选择要么为sRGB要么为linearRGB空间来进行滤镜效果的颜色操作. 此选项表明作者不要求颜色操作出现在特定的颜色空间中. Indicates that the user agent can choose either thesRGBor linearRGB spaces for filter effects color operations. Thisoption indicates that the author doesn't require that color operations occur ina particular color space.
sRGB
表示滤镜效果的颜色操作将出现在sRGB颜色空间中. Indicates that filter effects color operations should occur in the sRGB colorspace.
linearRGB
表示滤镜效果的颜色操作将出现在线性RGB颜色空间中. Indicatesthat filter effects color operations should occur in the linearized RGB colorspace.
'color-interpolation-filters' 属性指定经由滤镜效果所施行的图像操作的颜色空间. The 'color-interpolation-filters' property specifies thecolor space for imaging operations performed via filter effects.
注意'color-interpolation-filters' 与'color-interpolation'具有不同的初始值 . 'color-interpolation-filters'的初始值为 linearRGB, 而 'color-interpolation' 的初始值为 sRGB. 于是,在缺省情况下, 滤镜操作在linearRGB颜色空间中出现, 而所有其它的颜色插补在缺省情况下在 sRGB 颜色空间中出现. Note that 'color-interpolation-filters' has adifferent initial value than 'color-interpolation'.'color-interpolation-filters' has an initial valueof linearRGB, whereas 'color-interpolation'has an initial value of sRGB. Thus, in thedefault case, filter effects operations occur in the linearRGB color space,whereas all other color interpolations occur by default in the sRGB colorspace.
11.7.2'color-rendering' 属性 The 'color-rendering' property
精图内容的创作者也许要给实现者提供一种关于当执行颜色插补和合成时如何加快速度和提高质量之间的权衡的提示. 'color-rendering' 属性提供给精图用户代理如何优化颜色插补和合成操作的提示. The creator of SVG content might want to provide a hint to the implementationabout how to make speed vs. quality tradeoffs as it performs colorinterpolation and compositing. The 'color-rendering'property provides a hint to the SVG user agent about how to optimize its colorinterpolation and compositing operations.
'color-rendering' 优先于 'color-interpolation-filters'. 例如, 假设'color-rendering:optimizeSpeed' 和 'color-interpolation-filters:linearRGB'. 在这种情形下, 精图用户代理将以优化性能的方式施行颜色操作, 这也许意味着牺牲由'color-interpolation-filters:linearRGB'指定的颜色插补的精度. 'color-rendering' takes precedence over'color-interpolation-filters'. For example, assume 'color-rendering:optimizeSpeed' and 'color-interpolation-filters:linearRGB'. In this case,the SVG user agent should perform color operations in a way that optimizesperformance, which might mean sacrificing the color interpolation precision asspecified by 'color-interpolation-filters:linearRGB'.
| Value: | auto | optimizeSpeed | optimizeQuality | inherit |
| Initial: | auto |
| Applies to: | |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
auto
表示用户代理将在速度和质量间进行适当的平衡, 但是质量比速度更重要. Indicates that the user agent shall make appropriate tradeoffs to balance speedand quality, but quality shall be given more importance than speed.
optimizeSpeed
表示用户代理将强调渲染速度而不是质量. 对于 RGB 显示装置, 此选项将有时使得用户代理在装置的RGB颜色空间中进行颜色插补和合成. Indicates that the user agent shall emphasize rendering speed over quality. ForRGB display devices, this option will sometimes cause the user agent to performcolor interpolation and compositing in the device RGB color space.
optimizeQuality
表示用户代理将强调质量而不是渲染速度. Indicates that the user agent shall emphasize quality overrendering speed.
11.7.3'shape-rendering'属性 The 'shape-rendering' property
精图内容的创作者也许要给实现者提供一种当渲染矢量图形元素比如'path' 元素和基本形状 比如圆和矩形时如何作权衡的提示. 'shape-rendering' 属性提供这种提示. The creator of SVG content might want to providea hint to the implementation about what tradeoffs to make as it renders vectorgraphics elements such as'path'elements and basic shapessuch as circles and rectangles. The 'shape-rendering'property provides these hints.
| Value: | auto | optimizeSpeed | crispEdges | |
| Initial: | auto |
| Applies to: | |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
auto
表示用户代理将在速度, 光滑边缘 和几何精确上获得均衡, 但几何精确显得比速度和光滑边缘更重要. Indicates that the user agent shall make appropriate tradeoffs to balancespeed, crisp edges and geometric precision, but with geometric precision givenmore importance than speed and crisp edges.
optimizeSpeed
表示用户代理将强调渲染速度而不是几何精确和光滑边缘 . 此选项有时会使得用户代理关闭形状的反锯齿功能. Indicates that the user agent shall emphasizerendering speed over geometric precision and crisp edges. This option willsometimes cause the user agent to turn off shape anti-aliasing.
crispEdges
表示用户代理将试图强调艺术品的清楚的边缘胜过渲染速度和几何精确. 为了达到光滑边缘的效果, 用户代理也许会关闭所有线和曲线的反锯齿功能或者只对接近垂直或水平的直线关闭此项功能. Also, 用户代理也许会调整线的位置和宽度以便与装置的像素对齐边缘. Indicates that the user agent shall attempt toemphasize the contrast between clean edges of artwork over rendering speed andgeometric precision. To achieve crisp edges, the user agent might turn offanti-aliasing for all lines and curves or possibly just for straight lineswhich are close to vertical or horizontal. Also, the user agent might adjustline positions and line widths to align edges with device pixels.
geometricPrecision
表示用户代理将强调几何精确胜过渲染速度和光滑边缘. Indicates that the user agent shall emphasizegeometric precision over speed and crisp edges.
11.7.4'text-rendering'属性 The 'text-rendering' property
精图内容的创作者也许要给实现者提供一种当渲染文本时如何作权衡的提示. 'text-rendering' 属性提供这种提示. The creator of SVG contentmight want to provide a hint to the implementation about what tradeoffs to makeas it renders text. The 'text-rendering' propertyprovides these hints.
| Value: | auto | optimizeSpeed | optimizeLegibility | |
| Initial: | auto |
| Applies to: | 'text' elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
auto
表示用户代理将在速度, 易辨认性 和几何精确上获得适当的均衡, 但易辨认性显得比速度和几何精确更重要. Indicatesthat the user agent shall make appropriate tradeoffs to balance speed,legibility and geometric precision, but with legibility given more importancethan speed and geometric precision.
optimizeSpeed
表示用户代理将强调渲染速度而不是易辨认性和几何精确. 此选项有时会使得用户代理关闭文本的反锯齿功能. Indicates that the user agent shall emphasize rendering speedover legibility and geometric precision. This option will sometimes cause theuser agent to turn off text anti-aliasing.
optimizeLegibility
表示用户代理将强调易辨认性而不是渲染速度和几何精确.用户代理将常常选择是否使用反锯齿技术, 内建的字体提示或者同时使用两者来生成最易辨认的文本. Indicates that the user agent shall emphasizelegibility over rendering speed and geometric precision. The user agent willoften choose whether to apply anti-aliasing techniques, built-in font hintingor both to produce the most legible text.
geometricPrecision
表示用户代理将强调几何精确胜过易辨认性和渲染速度.这一选项常常使用户代理暂停提示的使用以便具有较好的几何精确度的图元的轮廓线绘制到路径数据的渲染中. Indicates that the user agent shall emphasizegeometric precision over legibility and rendering speed. This option willusually cause the user agent to suspend the use of hinting so that glyphoutlines are drawn with comparable geometric precision to the rendering of pathdata.
11.7.5The 'image-rendering' property
精图内容的创作者也许要给实现者提供一种当施行图像处理时如何在速度和质量上作权衡的提示. 'image-rendering' 属性为精图用户代理如何优化图像渲染提供了这种提示. The creator of SVG content might want to provide a hint to the implementationabout how to make speed vs. quality tradeoffs as it performs image processing.The 'image-rendering' property provides a hint tothe SVG user agent about how to optimize its image rendering.:
| Value: | auto | optimizeSpeed | optimizeQuality | inherit |
| Initial: | auto |
| Applies to: | images |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| yes |
auto
表示用户代理将在速度和质量间进行适当的平衡, 但是质量比速度更重要.用户代理将使用至少与最近邻域重采样一样好的重采样算法, 但是强烈推荐采用双线性重采样算法. 对于兼容高质量精图浏览器而言, 用户代理将使用至少与双线性重采样算法一样好的重采样算法. Indicates that the user agent shall makeappropriate tradeoffs to balance speed and quality, but quality shall be givenmore importance than speed. The user agent shall employ a resampling algorithmat least as good as nearest neighbor resampling, but bilinear resampling isstrongly preferred. ForConformingHigh-Quality SVG Viewers, the user agent shall employ a resamplingalgorithm at least as good as bilinear resampling.
optimizeQuality
表示用户代理将强调质量而不是渲染速度.用户代理将使用至少与双线性重采样算法一样好的重采样算法. Indicates that the user agent shall emphasize quality overrendering speed. The user agent shall employ a resampling algorithm at least asgood as bilinear resampling.
optimizeSpeed
表示用户代理将强调渲染速度而不是质量.用户代理应该使用可以达到快速渲染的目的的重采样算法, 并且要求使用至少与最近邻域重采样一样好的重采样算法. 如果使用高质量算法能够达到性能的目标, 那么用户代理应该使用高质量的算法代替最近邻域重采样算法. Indicates that the user agent shall emphasizerendering speed over quality. The user agent should use a resampling algorithmwhich achieves the goal of fast rendering, with the requirement that theresampling algorithm shall be at least as good as nearest neighbor resampling.If performance goals can be achieved with higher quality algorithms, then theuser agent should use the higher quality algorithms instead of nearest neighborresampling.
在所有情况下, 即使原始数据和/或目的装置为索引色彩,重采样必须在真彩(例如, 24-位)色彩空间中进行. In all cases, resampling must be done in a truecolor(e.g., 24-bit) color space even if the original data and/or the target deviceis indexed color.
11.8 Inheritance of painting properties
在本章中描述的绘制属性的任何值可以从给定对象的父对象上继承. 绘制, 无论如何, 总是在每个图形元素上独立进行的, 决不会在容器元素(例如, 一个 'g') 的级别上进行. 于是, 对于下列精图, 即使渐变填充是在'g'上指定的 , 通过'g' 元素渐变被其子元素即每个矩形所继承, 每个矩形被渲染时在其内部将用渐变进行填充. The values of any of the paintingproperties described in this chapter can be inherited from a given object'sparent. Painting, however, is always done on eachgraphicselement individually, never at the containerelement (e.g., a 'g') level. Thus, for the following SVG, eventhough the gradient fill is specified on the'g', the gradient is simply inherited through the'g' element down into each rectangle, each ofwhich is rendered such that its interior is painted with the gradient.
Example 属性继承 Example Inheritance
<?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="7cm" height="2cm" viewBox="0 0 700 200"
xmlns="http://www.w3.org/2000/svg">
<desc>Gradients apply to leaf nodes
</desc>
<g>
<defs>
<linearGradient id="MyGradient" gradientUnits="objectBoundingBox">
<stop offset="0%" stop-color="#F60" />
<stop offset="100%" stop-color="#FF6" />
</linearGradient>
</defs>
<rect x="1" y="1" width="698" height="198"
fill="none" stroke="blue" stroke-width="2" />
<g fill="url(#MyGradient)" >
<rect x="100" y="50" width="200" height="100"/>
<rect x="400" y="50" width="200" height="100"/>
</g>
</g>
</svg>
| Example Inheritance |
View thisexample as SVG (SVG-enabled browsers only)
在对象的边框上定义的任何绘制属性 使用 图形元素的边框为绘制操作所使用. 注意定义 文本元素 使得在对象的边框上定义的任何绘制属性使用整个'text' 元素的边框 . (参见 对象边框单位和文本元素的讨论.) Anypainting properties defined in terms of the object'sbounding box use the bounding box of the graphicselement to which the operation applies. Note that text elements are definedsuch that any painting operations defined in terms of theobject'sbounding box use the bounding box of the entire 'text' element. (See the discussion of objectbounding box units and text elements.)
11.9 文档对象模型接口 DOM interfaces
下列接口定义如下:Thefollowing interfaces are defined below: SVGPaint,SVGMarkerElement.
接口SVGPaint Interface SVGPaint
SVGPaint 接口 对应基本类型 <paint> 和表示属性'fill' 与'stroke'的值 . The SVGPaintinterface corresponds to basic type <paint> and represents the values ofproperties 'fill' and 'stroke'.
IDL 定义 IDLDefinition
interface SVGPaint : SVGColor {
// Paint Types
const unsigned short SVG_PAINTTYPE_UNKNOWN = 0;
const unsigned short SVG_PAINTTYPE_RGBCOLOR = 1;
const unsigned short SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR = 2;
const unsigned short SVG_PAINTTYPE_NONE = 101;
const unsigned short SVG_PAINTTYPE_CURRENTCOLOR = 102;
const unsigned short SVG_PAINTTYPE_URI_NONE = 103;
const unsigned short SVG_PAINTTYPE_URI_CURRENTCOLOR = 104;
const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR = 105;
const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR = 106;
const unsigned short SVG_PAINTTYPE_URI = 107;
readonly attribute unsigned short paintType;
readonly attribute DOMString uri;
void setUri ( in DOMString uri );
void setPaint ( in unsigned short paintType, in DOMString uri, in DOMString rgbColor, in DOMString iccColor )
raises( SVGException );
};
一组绘制类型的定义Definition group Paint Types
定义的常量 Defined constants
| SVG_PAINTTYPE_UNKNOWN |
| 此绘制类型不是一种预定义的类型. 企图为这一类型定义一个新的值或者将一个存在的值转换成这一类型都是无效的. The paint 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_PAINTTYPE_RGBCOLOR |
| 不用一种可替换的ICC颜色规定指定一种 sRGB 颜色. An sRGB color has been specified without an alternative ICC color specification. |
| SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR |
| 连同一种可替换的ICC颜色规定指定一种 sRGB 颜色. An sRGB color has been specified along with an alternative ICC color specification. |
| SVG_PAINTTYPE_NONE |
| 在<paint> 规定上对应一个 'none' 值. Corresponds to a 'none' value on a <paint> specification. |
| SVG_PAINTTYPE_CURRENTCOLOR |
| 在<paint> 规定上对应一个 'currentColor' 值. Corresponds to a 'currentColor' value on a <paint> specification. |
| SVG_PAINTTYPE_URI_NONE |
| 指定一 URI , 并伴随一个显式的 'none' 作为当URI不可用或无效时的备份的绘制方法. A URI has been specified, along with an explicit 'none' as the backup paint method in case the URI is unavailable or invalid. |
| SVG_PAINTTYPE_URI_CURRENTCOLOR |
| 指定一 URI , 并伴随一个 'currentColor' 作为当URI不可用或无效时的备份的绘制方法. A URI has been specified, along with 'currentColor' as the backup paint method in case the URI is unavailable or invalid. |
| SVG_PAINTTYPE_URI_RGBCOLOR |
| 指定一 URI , 并伴随一个 sRGB 颜色 作为当 URI不可用或无效时的备份的绘制方法. A URI has been specified, along with an sRGB color as the backup paint method in case the URI is unavailable or invalid. |
| SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR |
| 指定一 URI , 并伴随一个 sRGB 颜色连同一种可替换的ICC颜色 作为当 URI不可用或无效时的备份的绘制方法. A URI has been specified, along with both an sRGB color and alternate ICC color as the backup paint method in case the URI is unavailable or invalid. |
| SVG_PAINTTYPE_URI |
| Only a URI has been specified. |
性质 Attributes
readonly unsignedshort paintType
绘制类型, 由上述常量之一来标识. The type of paint, identified by one of the constants above.
readonly DOMString uri
当绘制类型指定了一个 URI时, 这一性质保存URI 字符串. 当绘制类型不指定了一个 URI时, 这一性质为空. When the paintTypespecifies a URI, this attribute holds the URI string. When the paintType doesnot specify a URI, this attribute is null.
方法 Methods
setUri
设置 paintType 为 SVG_PAINTTYPE_URI_NONE 并设置 uri 为给定的值. Sets thepaintType to SVG_PAINTTYPE_URI_NONE and sets urito the specified value.
参数 Parameters
| in DOMString uri |
| 所期望的绘制服务器的URI The URI for the desired paint server. |
无返回值 No Return Value
无例外 No Exceptions
setPaint
根据所指定参数设置 paintType . 如果 paintType 需要一个 URI, 那么 uri 必须非空并且为一有效的字符串;否则,uri 必须为空. 如果paintType 需要一种 RGBColor,那么 rgbColor 必须为一有效的 RGBColor 对象; 否则,rgbColor 必须为空. 如果 paintType 需要一种SVGICCColor, 那么 iccColor 必须为一有效的 SVGICCColor 对象; 否则,iccColor 必须为空. Sets the paintType as specified by the parameters. IfpaintTyperequires a URI, then uri must be non-null and a valid string; otherwise,uri must benull. If paintType requires an RGBColor, thenrgbColor must be avalid RGBColor object; otherwise, rgbColor must be null.IfpaintType requires an SVGICCColor, then iccColor must be avalid SVGICCColor object; otherwise,iccColor must be null.
参数 Parameters
| in unsigned short paintType |
| paintType的预定义的常量之一.One of the defined constants for paintType. |
| in DOMString uri |
| 所期望的绘制服务器的URI,或者为空. The URI for the desired paint server, or null. |
| in DOMString rgbColor |
| 指定一种sRGB颜色,或者为空. The specification of an sRGB color, or null. |
| in DOMString iccColor |
| 指定一种 ICC 颜色,或者为空. The specification of an ICC color, or null. |
无返回值 No Return Value
例外 Exceptions
| SVGException |
| SVG_INVALID_VALUE_ERR: 当参数中有一个无效值时触发 SVG_INVALID_VALUE_ERR: Raised if one of the parameters has an invalid value. |
接口SVGMarkerElement InterfaceSVGMarkerElement
SVGMarkerElement 接口对应于 'marker' 元素. The SVGMarkerElement interface corresponds to the 'marker' element.
IDL 定义 IDLDefinition
interface SVGMarkerElement :
SVGElement,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGFitToViewBox {
// Marker Unit Types
const unsigned short SVG_MARKERUNITS_UNKNOWN = 0;
const unsigned short SVG_MARKERUNITS_USERSPACEONUSE = 1;
const unsigned short SVG_MARKERUNITS_STROKEWIDTH = 2;
// Marker Orientation Types
const unsigned short SVG_MARKER_ORIENT_UNKNOWN = 0;
const unsigned short SVG_MARKER_ORIENT_AUTO = 1;
const unsigned short SVG_MARKER_ORIENT_ANGLE = 2;
readonly attribute SVGAnimatedLength refX;
readonly attribute SVGAnimatedLength refY;
readonly attribute SVGAnimatedEnumeration markerUnits;
readonly attribute SVGAnimatedLength markerWidth;
readonly attribute SVGAnimatedLength markerHeight;
readonly attribute SVGAnimatedEnumeration orientType;
readonly attribute SVGAnimatedAngle orientAngle;
void setOrientToAuto ( );
void setOrientToAngle ( in SVGAngle angle );
};
一组标记符号单位类型的定义Definition group Marker Unit Types
定义的常量 Defined constants
| SVG_MARKERUNITS_UNKNOWN |
| 此标记符号单位类型不是一种预定义的类型. 企图为这一类型定义一个新的值或者将一个存在的值转换成这一类型都是无效的. The marker 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_MARKERUNITS_USERSPACEONUSE |
| 性质 markerUnits 的值为 'userSpaceOnUse'. The value of attribute markerUnits is 'userSpaceOnUse'. |
| SVG_MARKERUNITS_STROKEWIDTH |
| 性质 markerUnits 的值为'strokeWidth'. The value of attribute markerUnits is 'strokeWidth'. |
一组标记符号方向类型的定义 Definitiongroup Marker Orientation Types
定义的常量 Defined constants
| SVG_MARKER_ORIENT_UNKNOWN |
| 此标记符号方向类型不是一种预定义的类型. 企图为这一类型定义一个新的值或者将一个存在的值转换成这一类型都是无效的. The marker orientation 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_MARKER_ORIENT_AUTO |
| 性质 orient 的值为 'auto'. Attribute orient has value 'auto'. |
| SVG_MARKER_ORIENT_ANGLE |
| 性质 orient 的值为一个角度. Attribute orient has an angle value. |
性质 Attributes
readonly SVGAnimatedLength refX
对应于给定'marker' 元素的性质 refX. Corresponds to attribute refXon the given 'marker' element.
readonly SVGAnimatedLength refY
对应于给定'marker' 元素的性质 refY . Corresponds to attribute refYon the given 'marker' element.
readonly SVGAnimatedEnumeration markerUnits
对应于给定'marker' 元素的性质 markerUnits. 上述所定义的标记符号单位类型之一. Corresponds to attribute markerUnitson the given 'marker' element. One of theMarker Units Types defined above.
readonly SVGAnimatedLength markerWidth
对应于给定'marker' 元素的性质 markerWidth. Corresponds to attribute markerWidthon the given 'marker' element.
readonly SVGAnimatedLength markerHeight
对应于给定'marker' 元素的性质 markerHeight. Corresponds to attribute markerHeighton the given 'marker' element.
readonly SVGAnimatedEnumeration orientType
对应于给定'marker' 元素的性质 orient. 上述所定义的标记符号方向类型之一. Corresponds to attribute orienton the given 'marker' element. One of theMarker Orientation Types defined above.
readonly SVGAnimatedAngle orientAngle
对应于给定'marker' 元素的性质 orient. 如果markerUnits为SVG_MARKER_ORIENT_ANGLE,则性质orient为一角度值;否则, 将其设置为零.Corresponds to attribute orient on the given 'marker' element. If markerUnits isSVG_MARKER_ORIENT_ANGLE, the angle value for attribute orient;otherwise, it will be set to zero.
方法 Methods
setOrientToAuto
设置性质orient 的值为 'auto'. Sets the value ofattribute orient to 'auto'.
无参数 No Parameters
无返回值 No Return Value
无例外 No Exceptions
setOrientToAngle
设置性质orient 的值为给定的角度. Sets the value ofattribute orient to the given angle.
无参数 Parameters
| in SVGAngle angle |
| The angle value to use for attribute orient. |
无返回值 No Return Value
无例外 No Exceptions
5754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
