精图规范1.0----6 样式 Styling

previous next   contents   elements   attributes   properties   index  

---

04 September 2001

6 样式  Styling

内容 Contents

• 6.1 精图的样式属性 SVG's styling properties
• 6.2 样式的用法 Usage scenarios for styling
• 6.3 指定样式属性的两种方式 Alternative ways to specify styling properties
• 6.4 使用表示属性指定样式属性 Specifying properties using the presentation attributes
• 6.5 表示属性的实体定义 Entity definitions for the presentation attributes
• 6.6 使用XSL格式化 Styling with XSL
• 6.7 使用CSS格式化 Styling with CSS
• 6.8 属性名和属性值区分大小写 Case sensitivity of property names and values
• 6.9 精图借用来自CSS 和 XSL的功能  Facilities from CSS and XSL used by SVG
• 6.10 引用外部的样式表 Referencing external style sheets
• 6.11 样式元素 'style'  The 'style' element
• 6.12 类属性 class   The class attribute
• 6.13 样式属性 style  The style attribute
• 6.14 指定缺省的样式表语言 Specifying the default style sheet language
• 6.15 属性继承 Property inheritance
• 6.16 样式的作用域 The scope/range of styles
• 6.17 用户代理样式表 User agent style sheet
• 6.18 听觉样式表 Aural style sheets
• 6.19 文档对象模型接口 DOM interfaces

 

6.1 精图的样式属性 SVG's stylingproperties

精图使用 样式属性 来描述多数文档参数. 样式属性定义如何渲染在精图文档中的元素. 对于下列参数精图使用样式属性: SVG uses styling properties to describe many of its documentparameters. Styling properties define how the graphics elements in the SVGcontent are to be rendered. SVG uses styling properties for the following:

• 本来明显为可视的那些参数故它们适合进行样式化. 例如那些定义如何进行"绘制"的所有属性如填充和描边颜色、线宽和破折格式.   Parameters which are clearly visual in nature and thus lend themselves to styling. Examples include all attributes that define how an object is "painted," such as fill and stroke colors, linewidths and dash styles.
• 那些指定文本格式如 'font-family' 和 'font-size'的参数.Parameters having to do with text styling such as 'font-family' and 'font-size'.
• 那些影响图形元素渲染方式的参数, 如指定剪裁路径、蒙版、箭头、标记和滤镜效果.   Parameters which impact the way that graphical elements are rendered, such as specifying clipping paths, masks, arrowheads, markers and filter effects.

精图共享CSS [CSS2]和XSL [XSL]中的许多可样式化属性 . 除了在此规范中明确提到的那些额外的精图特定的规则外, 与CSS 和 XSL共享的属性的标准定义来自CSS2规范[CSS2]中属性的定义.   SVG shares many of its styling properties with CSS [CSS2] and XSL [XSL]. Except for any additional SVG-specificrules explicitly mentioned in this specification, the normative definition ofproperties that are shared with CSS and XSL is the definition of the propertyfrom the CSS2 specification [CSS2].

下列属性在CSS2和精图间是共有的. 这些属性的大多数在XSL中也进行了定义:   The following properties are shared between CSS2 andSVG. Most of these properties are also defined in XSL:

• 字体属性:Font properties:
  • 'font'
  • 'font-family'
  • 'font-size'
  • 'font-size-adjust'
  • 'font-stretch'
  • 'font-style'
  • 'font-variant'
  • 'font-weight'
• 文本属性: Text properties:
  • 'direction'
  • 'letter-spacing'
  • 'text-decoration'
  • 'unicode-bidi'
  • 'word-spacing'
• 其它关于可视媒体的属性: Other properties for visual media:
  • 'clip' (只用于最外面的精图元素 'svg' Only applicable to outermost 'svg')
  • 'color' 为'fill','stroke', 'stop-color', 'flood-color'属性提供潜在间接的属性值(currentColor) ,精图的那些支持颜色的属性允许一种颜色说明从CSS2中进行扩展以适应任意颜色空间中颜色的定义. 参见颜色配置选项描述子.    is used to provide a potential indirect value (currentColor) for the'fill', 'stroke', 'stop-color', 'flood-color', 'lighting-color' properties. The SVG properties which support color allow a color specification which is extended from CSS2 to accommodate color definitions in arbitrary color spaces. SeeColor profile descriptions.
  • 'cursor'
  • 'display'
  • 'overflow' (只用于能够建立一新视口的元素  Only applicable to elements which establish a new viewport)
  • 'visibility'

下列精图属性没有在 [CSS2]中定义. 这些属性的完整的正式定义可以在本规范中找到:   The following SVG properties are not defined in [CSS2]. The complete normativedefinitions for these properties are found in this specification:

• 剪切、蒙版和合成 属性:Clipping, Masking and Compositing properties:
  • 'clip-path'
  • 'clip-rule'
  • 'mask'
  • 'opacity'
• 滤镜效果 属性:Filter Effects properties:
  • 'enable-background'
  • 'filter'
  • 'flood-color'
  • 'flood-opacity'
  • 'lighting-color'
• 渐变 属性: Gradient properties:
  • 'stop-color'
  • 'stop-opacity'
• 交互性 属性:  Interactivity properties:
  • 'pointer-events'
• 颜色 和绘制 属性:   Color and Painting properties:
  • 'color-interpolation'
  • 'color-interpolation-filters'
  • 'color-profile'
  • 'color-rendering'
  • 'fill'
  • 'fill-opacity'
  • 'fill-rule'
  • 'image-rendering'
  • 'marker'
  • 'marker-end'
  • 'marker-mid'
  • 'marker-start'
  • 'shape-rendering'
  • 'stroke'
  • 'stroke-dasharray'
  • 'stroke-dashoffset'
  • 'stroke-linecap'
  • 'stroke-linejoin'
  • 'stroke-miterlimit'
  • 'stroke-opacity'
  • 'stroke-width'
  • 'text-rendering'
• 文本 属性:Text properties:
  • 'alignment-baseline'
  • 'baseline-shift'
  • 'dominant-baseline'
  • 'glyph-orientation-horizontal'
  • 'glyph-orientation-vertical'
  • 'kerning'
  • 'text-anchor'
  • 'writing-mode'

样式属性的列表及概要的表格在属性索引中可以找到. A table that lists and summarizes the styling properties can be found in theProperty Index.

6.2 样式的用法 Usage scenarios forstyling

精图有很多根据不同需要的用法. 这里为三种通常的用法:  SVG has many usage scenarios, each with different needs. Here are three commonusage scenarios:

1.   将精图内容当作一种独立的交换格式 (独立于样式表语言的): SVGcontent used as an exchange format (style sheet language-independent):

在某些使用情形中, 精图内容在软件工具之间的可靠的互操作能力是其主要目标. 因为支持一种特定的样式表语言并不保证在所有实现中可用, 这就要求精图内容无须借用一种样式表语言就能够充分指定.   In some usage scenarios, reliable interoperability ofSVG content across software tools is the main goal. Since support for aparticular style sheet language is not guaranteed across all implementations,it is a requirement that SVG content can be fully specified without the use ofa style sheet language.

2.   精图内容通过作为XSLT [XSLT]的输出而生成: SVG content generated as the output from XSLT [XSLT]:

XSLT 提供一种能力它能够将任意的XML 内容的流作为输入, 通过使用潜在的复杂变换, 然后生成精图内容作为输出. XSLT 能够将数据库中抽取的数据转换成数据的精图图形表示. 此时要求完全特定的精图内容能够XSLT从中生成 .    XSLT offers the ability to take a stream ofarbitrary XML content as input, apply potentially complex transformations, andthen generate SVG content as output. XSLT can be used to transform XML dataextracted from databases into an SVG graphical representation of that data. Itis a requirement that fully specified SVG content can be generated from XSLT.

3.   用CSS [CSS2]格式化精图内容: SVG content styled with CSS [CSS2]:

CSS 是一种用来格式化XML内容包括精图内容的格式广泛实现的说明性语言. 它表示为特征的组合, 简洁性使其非常适用于精图的很多应用. 这就要求CSS样式能够用于精图内容上.   CSS is a widelyimplemented declarative language for assigning styling properties to XMLcontent, including SVG. It represents a combination of features, simplicity andcompactness that makes it very suitable for many applications of SVG. It is arequirement that CSS styling can be applied to SVG content.

6.3 指定样式属性的两种方式  Alternative ways to specify styling properties

样式属性可以通过下列两种方式指派给精图元素:  Styling properties can beassigned to SVG elements in the following two ways:

·        表示属性  Presentation attributes

样式属性可以用精图的表示属性来指定 . 对于每一在此规范中定义的样式属性, 在所有相关的精图元素上都有对应的XML 表示属性. 表示属性的详细信息在 使用表示属性指定样式属性中可以找到.  Styling properties can be assigned using SVG's presentation attributes. For each styling propertydefined in this specification, there is a corresponding XML presentationattribute available on all relevant SVG elements. Detailed information on thepresentation attributes can be found in Specifyingproperties using the presentation attributes.

表示属性是独立于样式表语言的于是可用于上面的情形1 (即, 工具的互操作性). 因为它直接了当地从XSLT中指派值给XML属性 , 表示属性也适用于上面的情形 2  (即, 从XSLT中生成精图 ). (参见下面的用 XSL进行格式化 .)   The presentation attributesare style sheet language independent and thus are applicable to usage scenario1 above (i.e., tool interoperability). Because it is straightforward to assignvalues to XML attributes from XSLT, the presentation attributes are well-suitedto usage scenario 2 above (i.e., SVG generation from XSLT). (See Styling withXSL below.)

兼容精图解释器 和兼容精图浏览器 要求支持精图的表示属性.  ConformingSVG Interpreters and ConformingSVG Viewers are required to support SVG's presentation attributes.

·        层叠样式表 CSS

为了支持上述情形 3 , 精图内容能够用CSS来格式化 . 更多的信息, 请参见用CSS进行格式化.  To support usage scenario 3 above,SVG content can be styled with CSS. For more information, see Styling withCSS.

支持普通的 (即,基于文本的)  XML内容的 CSS格式化的兼容精图解释器 和兼容精图浏览器 同样要求支持精图内容的CSS格式化 .   ConformingSVG Interpreters and ConformingSVG Viewers that support CSS styling of generic (i.e., text-based) XMLcontent are required to support CSS styling of SVG content.

6.4 使用表示属性指定样式属性 Specifyingproperties using the presentation attributes

对于此规范中定义的样式属性 (参见 属性索引), 存在一个对应的并且名字相同的 XML 属性 (表示属性) 在所有相关的精图元素上是可用的. 例如, 精图有一个填充属性 'fill' 定义如何在形状的内部进行绘制. 于是就有一个对应的表示属性具有相同的名字 (即, fill) 它可以用来指定一个给定元素的填充属性'fill' 的值.     For each styling property defined in this specification (see Property Index), there isa corresponding XML attribute (the presentation attribute)with the same name that is available on all relevant SVG elements. For example,SVG has a'fill' property that defines how to paint theinterior of a shape. There is a corresponding presentation attribute with thesame name (i.e., fill) that can be used to specifya value for the'fill' property on a given element.

下列例子说明 'fill' 和 'stroke' 属性如何能够使用 fill和stroke 表示属性指派给一个矩形. 此矩形将用红色填充而用蓝色描边:  The following example shows how the'fill' and 'stroke' properties can be assigned to a rectangleusing the fill and strokepresentation attributes. The rectangle will be filled with red and outlinedwith blue:

<?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="10cm" height="5cm" viewBox="0 0 1000 500"

     xmlns="http://www.w3.org/2000/svg">

  <rect x="200" y="100" width="600" height="300" 

        fill="red" stroke="blue" stroke-width="3"/>

</svg>

Viewthis example as SVG (SVG-enabled browsers only)
 

表示属性提供下列优点: The presentation attributes offer the followingadvantages:

• 广泛的支持.  兼容精图解释器 和 兼容精图浏览器 的所有版本要求支持精图的表示属性.    Broad support. All versions of Conforming SVG Interpreters and Conforming SVG Viewers are required to support the presentation attributes.
• 简单性. 通过在适当的元素上为表示属性简单地提供一个值便可以将样式属性与元素相联系.  Simplicity. Styling properties can be attached to elements by simply providing a value for the presentation attribute on the proper elements.
• 重样式. 使用表示属性的精图内容与使用 XSLT [XSLT]的下游处理或者通过追加CSS样式规则的附加样式覆盖某些表示属性是高度兼容的. Restyling. SVG content that uses the presentation attributes is highly compatible with downstream processing using XSLT [XSLT] or supplemental styling by adding CSS style rules to override some of the presentation attributes.
• 方便使用XSLT [XSLT]生成. 在某些情况下, 能够用XSLT生成完全格式化的精图内容. 表示属性与通过精图的XSLT方便生成是兼容的 .Convenient generation using XSLT [XSLT]. In some cases, XSLT can be used to generate fully styled SVG content. The presentation attributes are compatible with convenient generation of SVG from XSLT.

在某些情况下, 使用表示属性的精图内容与使用样式表语言如 CSS (参见用CSS进行格式化)进行格式化的精图内容相比有某些潜在的限制. 在其它情况下, 如当一个 XSLT 样式表从语义丰富的XML源文件中生成精图内容, 下列的限制也许并不适用. 根据不同的情形, 下列潜在的限制也许适用也许并不适用于表示属性:    In some situations, SVG content that uses thepresentation attributes has potential limitations versus SVG content that isstyled with a style sheet language such as CSS (see Styling withCSS). In other situations, such as when an XSLT style sheet generates SVGcontent from semantically rich XML source files, the limitations below may notapply. Depending on the situation, some of the following potential limitationsmay or may not apply to the presentation attributes:

• 样式附在内容上. 表示属性被直接附在特定的元素上, 因此减少了从内容中抽出样式的潜在优点, 如针对不同的应用和环境进行不同样式化的能力.Styling attached to content. The presentation attributes are attached directly to particular elements, thereby diminishing potential advantages that comes from abstracting styling from content, such as the ability to restyle documents for different uses and environments.
• 平坦的数据模型. In and of themselves, 表示属性不提供在样式系统中提供的较高级的抽象, 如给应用于特定一类元素的属性集命名. 在很多情况下,其结果是重要的高级语义信息被丢失, 隐含导致文档的重用和重格式化更加困难. Flattened data model. In and of themselves, the presentation attributes do not offer the higher level abstractions that you get with a styling system, such as the ability to define named collections of properties which are applied to particular categories of elements. The result is that, in many cases, important higher level semantic information can be lost, potentially making document reuse and restyling more difficult.
• 潜在的增加文件尺寸. 很多类型的图形在多个元素中使用类似的样式属性. 例如, 一个公司组织结构图可以指定一套样式属性到临时工方框 (例如, 虚轮廓线, 红色填充), 而一套不同的样式属性到正式工 (例如, 实轮廓线, 蓝色填充). 样式系统如 CSS 允许一套属性在一个文件中只定义一次. 而用样式属性, 也许需要在每个元素上指定表示属性.   Potential increase in file size. Many types of graphics use similar styling properties across multiple elements. For example, a company organization chart might assign one collection of styling properties to the boxes around temporary workers (e.g., dashed outlines, red fill), and a different collection of styling properties to permanent workers (e.g., solid outlines, blue fill). Styling systems such as CSS allow collections of properties to be defined once in a file. With the styling attributes, it might be necessary to specify presentation attributes on each different element.
• 当嵌入CSS-样式的上级文档时发生困难. 当精图内容嵌入其它XML文档时 , 自然希望用CSS格式化复合文档的每一部分 , 而使用表示属性也许会导致复杂和困难. 此时, 如果精图内容不使用表示属性而用CSS工具有时更容易.  Potential difficulty when embedded into a CSS-styled parent document. When SVG content is embedded in other XML, and the desire is to style all aspects of the compound document with CSS, use of the presentation attributes might introduce complexity and difficulty. In this case, it is sometimes easier if the SVG content does not use the presentation attributes and instead is styled using CSS facilities.

对于支持CSS的用户代理 , 表示属性必须转换成对应的按照在 CSS2 规范的章节6.4.4所描述的CSS样式规则, 非-CSS表示提示的优先级, 需要特别说明的是从概念上来说表示属性将被插入到一个新的作者样式表中, 它为作者样式表集合的第一个. 于是表示属性将加入到CSS2 cascade中好像它们被置于作者样式表开头指定为零的对应的 CSS 样式规则所取代. 一般说来, 这意味着表示属性具有比其它在作者样式表或style属性中指定的 CSS 样式规则较低的优先级.      For user agents that support CSS,the presentation attributes must be translated to corresponding CSS style rulesaccording to rules described in section 6.4.4 of the CSS2 specification,Precedence of non-CSSpresentational hints, with the additional clarification that thepresentation attributes are conceptually inserted into a new author style sheetwhich is the first in the author style sheet collection. The presentationattributes thus will participate in theCSS2 cascade as if theywere replaced by corresponding CSS style rules placed at the start of theauthor style sheet with a specificity of zero. In general, this means that thepresentation attributes have lower priority than other CSS style rulesspecified in author style sheets orstyle attributes.

不支持的用户代理必须忽略在CSS样式表和 style 属性中定义的任何CSS样式规则. 此时, CSS 层叠不适用 . (但是属性的继承可以使用,. 参见 属性继承.)   User agents that do not supportCSS must ignore any CSS style rules defined in CSS style sheets andstyle attributes. In this case, the CSS cascade doesnot apply. (Inheritance of properties, however, does apply. SeePropertyinheritance.)

在一个表示属性定义内的一个 !important 声明是一种错误. An !important declaration within a presentationattribute definition is an error.

表示属性的动画等价于对应属性的动画. 于是, 用 attributeType="XML" 动画表示属性出现的效果与用attributeType="CSS" 动画对应的属性的效果相同.    Animation of presentation attributes is equivalent to animating thecorresponding property. Thus, the same effect occurs from animating thepresentation attribute withattributeType="XML" as occurs withanimating the corresponding property with attributeType="CSS".

6.5 表示属性的实体定义 Entity definitionsfor the presentation attributes

下列为精图中所有表示属性在 DTD中定义的实体:  The following entities are defined in theDTD for all of thepresentation attributes in SVG:

<!-- The following presentation attributes have to do with specifying color. -->

<!ENTITY % PresentationAttributes-Color

  "color %Color; #IMPLIED

   color-interpolation (auto | sRGB | linearRGB | inherit) #IMPLIED

   color-rendering (auto | optimizeSpeed | optimizeQuality | inherit) #IMPLIED " >

<!-- The following presentation attributes apply to container elements. -->

<!ENTITY % PresentationAttributes-Containers

  "enable-background %EnableBackgroundValue; #IMPLIED " >

<!-- The following presentation attributes apply to 'feFlood' elements. -->

<!ENTITY % PresentationAttributes-feFlood

  "flood-color %SVGColor; #IMPLIED

   flood-opacity %OpacityValue; #IMPLIED " >

<!-- The following presentation attributes apply to filling and stroking operations. -->

<!ENTITY % PresentationAttributes-FillStroke

  "fill %Paint; #IMPLIED

   fill-opacity %OpacityValue; #IMPLIED

   fill-rule %ClipFillRule; #IMPLIED

   stroke %Paint; #IMPLIED

   stroke-dasharray %StrokeDashArrayValue; #IMPLIED

   stroke-dashoffset %StrokeDashOffsetValue; #IMPLIED

   stroke-linecap (butt | round | square | inherit) #IMPLIED

   stroke-linejoin (miter | round | bevel | inherit) #IMPLIED

   stroke-miterlimit %StrokeMiterLimitValue; #IMPLIED

   stroke-opacity %OpacityValue; #IMPLIED

   stroke-width %StrokeWidthValue; #IMPLIED " >

<!-- The following presentation attributes apply to filter primitives. -->

<!ENTITY % PresentationAttributes-FilterPrimitives

  "color-interpolation-filters (auto | sRGB | linearRGB | inherit) #IMPLIED " >

<!-- The following presentation attributes have to do with selecting a font to use. -->

<!ENTITY % PresentationAttributes-FontSpecification

  "font-family %FontFamilyValue; #IMPLIED

   font-size %FontSizeValue; #IMPLIED

   font-size-adjust %FontSizeAdjustValue; #IMPLIED

   font-stretch (normal | wider | narrower | ultra-condensed | extra-condensed |

                 condensed | semi-condensed | semi-expanded | expanded |

                 extra-expanded | ultra-expanded | inherit) #IMPLIED

   font-style (normal | italic | oblique | inherit) #IMPLIED

   font-variant (normal | small-caps | inherit) #IMPLIED

   font-weight (normal | bold | bolder | lighter | 100 | 200 | 300 |

               400 | 500 | 600 | 700 | 800 | 900 | inherit) #IMPLIED " >

<!-- The following presentation attributes apply to gradient 'stop' elements. -->

<!ENTITY % PresentationAttributes-Gradients

  "stop-color %SVGColor; #IMPLIED

   stop-opacity %OpacityValue; #IMPLIED " >

<!-- The following presentation attributes apply to graphics elements. -->

<!ENTITY % PresentationAttributes-Graphics

  "clip-path %ClipPathValue; #IMPLIED

   clip-rule %ClipFillRule; #IMPLIED

   cursor %CursorValue; #IMPLIED

   display (inline | block | list-item | run-in | compact | marker |

            table | inline-table | table-row-group | table-header-group |

            table-footer-group | table-row | table-column-group | table-column |

            table-cell | table-caption | none | inherit) #IMPLIED

   filter %FilterValue; #IMPLIED

   image-rendering (auto | optimizeSpeed | optimizeQuality | inherit) #IMPLIED

   mask %MaskValue; #IMPLIED

   opacity %OpacityValue; #IMPLIED

   pointer-events (visiblePainted | visibleFill | visibleStroke | visible |

                   painted | fill | stroke | all | none | inherit) #IMPLIED

   shape-rendering (auto | optimizeSpeed | crispEdges | geometricPrecision | inherit) #IMPLIED

   text-rendering (auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit) #IMPLIED

   visibility (visible | hidden | inherit) #IMPLIED " >

<!-- The following presentation attributes apply to 'image' elements. -->

<!ENTITY % PresentationAttributes-Images

  "color-profile CDATA #IMPLIED " >

<!--The following presentation attributes apply to 'feDiffuseLighting' and 'feSpecularLighting' elements. -->

<!ENTITY % PresentationAttributes-LightingEffects

  "lighting-color %SVGColor; #IMPLIED " >

<!-- The following presentation attributes apply to marker operations. -->

<!ENTITY % PresentationAttributes-Markers

  "marker-start %MarkerValue; #IMPLIED

   marker-mid %MarkerValue; #IMPLIED

   marker-end %MarkerValue; #IMPLIED " >

<!-- The following presentation attributes apply to text content elements. -->

<!ENTITY % PresentationAttributes-TextContentElements

  "alignment-baseline (baseline | top | before-edge | text-top | text-before-edge |

                        middle | bottom | after-edge | text-bottom | text-after-edge |

                        ideographic | lower | hanging | mathematical | inherit) #IMPLIED

   baseline-shift %BaselineShiftValue; #IMPLIED

   direction (ltr | rtl | inherit) #IMPLIED

   dominant-baseline (auto | autosense-script | no-change | reset|

                      ideographic | lower | hanging | mathematical | inherit ) #IMPLIED

   glyph-orientation-horizontal %GlyphOrientationHorizontalValue; #IMPLIED

   glyph-orientation-vertical %GlyphOrientationVerticalValue; #IMPLIED

   kerning %KerningValue; #IMPLIED

   letter-spacing %SpacingValue; #IMPLIED

   text-anchor (start | middle | end | inherit) #IMPLIED

   text-decoration %TextDecorationValue; #IMPLIED

   unicode-bidi (normal | embed | bidi-override | inherit) #IMPLIED

   word-spacing %SpacingValue; #IMPLIED " >

<!-- The following presentation attributes apply to 'text' elements. -->

<!ENTITY % PresentationAttributes-TextElements

  "writing-mode (lr-tb | rl-tb | tb-rl | lr | rl | tb | inherit) #IMPLIED " >

<!-- The following presentation attributes apply to elements that establish viewports. -->

<!ENTITY % PresentationAttributes-Viewports

  "clip %ClipValue; #IMPLIED

   overflow (visible | hidden | scroll | auto | inherit) #IMPLIED " >

<!--The following represents the complete list of presentation attributes. -->

<!ENTITY % PresentationAttributes-All

  "%PresentationAttributes-Color;

   %PresentationAttributes-Containers;

   %PresentationAttributes-feFlood;

   %PresentationAttributes-FillStroke;

   %PresentationAttributes-FilterPrimitives;

   %PresentationAttributes-FontSpecification;

   %PresentationAttributes-Gradients;

   %PresentationAttributes-Graphics;

   %PresentationAttributes-Images;

   %PresentationAttributes-LightingEffects;

   %PresentationAttributes-Markers;

   %PresentationAttributes-TextContentElements;

   %PresentationAttributes-TextElements;

   %PresentationAttributes-Viewports;" >

6.6 使用XSL进行格式化 Styling with XSL

XSL样式表(参见 [XSLT]) 定义如何将XML内容转换成其它的形式, 通常为其它XML. 当 XSLT 用来与精图协作时, 有时精图既是XSL样式表的输入又是其输出. 有时, XSL样式表将使用非精图内容作为输入而生成精图内容作为输出.   XSL style sheets (see [XSLT]) define how to transform XML contentinto something else, usually other XML. When XSLT is used in conjunction withSVG, sometimes SVG content will serve as both input and output for XSL stylesheets. Other times, XSL style sheets will take non-SVG content as input andgenerate SVG content as output.

下列例子使用一个外部XSL 样式表将精图内容转换成修改后的精图内容(参见引用外部样式表). 样式表分别将所有矩形的属性'fill' 和'stroke'设置为红色和蓝色:  The following example uses an external XSL style sheet to transform SVG contentinto modified SVG content (see Referencingexternal style sheets). The style sheet sets the 'fill' and 'stroke' properties on all rectangles to red andblue, respectively:

mystyle.xsl

<?xml version="1.0" standalone="no"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

  <!-- Add DOCTYPE -->

  <xsl:template match="/">

    <xsl:text disable-output-escaping="yes"><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 

      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

</xsl:text>

    <xsl:apply-templates/>

  </xsl:template>

  <!-- Add styling to all 'rect' elements -->

  <xsl:template match="rect">

    <xsl:copy>

      <xsl:copy-of select="@*"/>

      <xsl:attribute name="fill">red</xsl:attribute>

      <xsl:attribute name="stroke">blue</xsl:attribute>

      <xsl:attribute name="stroke-width">3</xsl:attribute>

    </xsl:copy>

  </xsl:template>

  <!-- default is to copy input element -->

  <xsl:template match="*|@*|text()">

    <xsl:copy>

      <xsl:apply-templates select="*|@*|text()"/>

    </xsl:copy>

  </xsl:template>

</xsl:stylesheet>

SVG file to be transformed by mystyle.xsl

<?xml version="1.0" standalone="no"?>

<svg width="10cm" height="5cm"

     xmlns="http://www.w3.org/2000/svg">

  <rect x="2cm" y="1cm" width="6cm" height="3cm"/>

</svg>

SVG content after applying mystyle.xsl

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 

      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="10cm" height="5cm"

     xmlns="http://www.w3.org/2000/svg">

  <rect x="2cm" y="1cm" width="6cm" height="3cm" fill="red" stroke="blue" stroke-width="3"/>

</svg>

6.7 使用CSS进行格式化  Styling with CSS

支持的精图实现需要支持下列特性:  SVG implementations that support CSSare required to support the following:

• 从当前文档中引用外部 CSS 样式表  (参见 引用外部样式表)  External CSS style sheets referenced from the current document (seeReferencing external style sheets)
• 内部 CSS 样式表 (即, 嵌入当前文档内的样式表, 例如精图中的 'style' 元素)  Internal CSS style sheets (i.e., style sheets embedded within the current document, such as within an SVG'style' element)
• 内联样式 (即, 在特定精图元素上的属性 style 的CSS 属性声明)   Inline style (i.e., CSS property declarations within a style attribute on a particular SVG element)

下列例子说明使用外部 CSS 样式表分别将所有矩形的 'fill' 和'stroke' 属性设置为红色和蓝色:  The following example shows the use of an external CSS style sheet to set the'fill' and 'stroke' properties on all rectangles to red andblue, respectively:

mystyle.css

rect {

  fill: red;

  stroke: blue;

  stroke-width: 3

}

SVG file referencing mystyle.css

<?xml version="1.0" standalone="no"?>

<?xml-stylesheet href="mystyle.css" type="text/css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 

  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="10cm" height="5cm" viewBox="0 0 1000 500"

     xmlns="http://www.w3.org/2000/svg">

  <rect x="200" y="100" width="600" height="300"/>

</svg>

Viewthis example as SVG (SVG-enabled browsers only)
 

可以将CSS样式表嵌入精图内容的元素'style'内部 . 下列例子使用内部的CSS 样式表达到前面例子的相同的效果:   CSS stylesheets can be embedded within SVG content inside of a'style' element. The following example uses aninternal CSS style sheet to achieve the same result as the previous example:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 

  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="10cm" height="5cm" viewBox="0 0 1000 500"

     xmlns="http://www.w3.org/2000/svg">

  <defs>

    <style type="text/css"><![CDATA[

      rect {

        fill: red;

        stroke: blue;

        stroke-width: 3

      }

    ]]></style>

  </defs>

  <rect x="200" y="100" width="600" height="300"/>

</svg>

Viewthis example as SVG (SVG-enabled browsers only)
 

注意如何将CSS 样式表放入 CDATA 结构中(即, <![CDATA[ ... ]]>). 由于CSS 样式表中可能包含象">"这些与 XML分析器冲突的特殊的字符，故有时必须将内部CSS 样式表放入CDATA 块中. 即使不使用与XML分析器冲突的特殊的字符, 亦建议将内部 样式表放入 CDATA 块中.   Note how the CSS style sheet is placed within aCDATAconstruct (i.e.,<![CDATA[ ... ]]>). Placing internal CSSstyle sheets within CDATA blocks is sometimes necessary since CSSstyle sheets can include characters, such as ">", which conflictwith XML parsers. Even if a given style sheet does not use characters thatconflict with XML parsing, it is highly recommended that internal style sheetsbe placed insideCDATA blocks.

支持CSS的实现也要求支持CSS内联样式. 与HTML中的属性 style 类似, CSS内联样式可以在精图的style 属性中通过用分号分隔的属性说明来指定, 而每个属性说明具有 "名字: 值"的形式.    Implementations that support CSS are alsorequired to support CSS inline style. Similar to the style attribute in HTML, CSS inline style can bedeclared within a style attribute in SVG by specifying asemicolon-separated list of property declarations, where each propertydeclaration has the form "name: value".

下列例子说明如何通过使用style 属性将 'fill' 和 'stroke' 属性指派给一个矩形. 正如以前的例子, 此矩形将以红色填充而以蓝色描边:  The followingexample shows how the'fill' and 'stroke' properties can be assigned to a rectangleusing the style attribute. Just like the previous example, therectangle will be filled with red and outlined with blue:

<?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="10cm" height="5cm" viewBox="0 0 1000 500"

     xmlns="http://www.w3.org/2000/svg">

  <rect x="200" y="100" width="600" height="300" 

        style="fill:red; stroke:blue; stroke-width:3"/>

</svg>

Viewthis example as SVG (SVG-enabled browsers only)
 

在一个支持CSS 样式表的精图用户代理中, 必须支持来自 [CSS2]的下列功能:  In an SVG user agent that supports CSS style sheets, thefollowing facilities from [CSS2]must be supported:

• 样式表内的CSS2选择子 (参见: [选择子]).  CSS2 selectors within style sheets (reference: [Selectors]).
• 外部 CSS 样式表 [XML-SS], 在元素'style' 内的CSS 样式表和与特定精图元素相关的属性style 内的 CSS说明块 .  External CSS style sheets [XML-SS], CSS style sheets within'style' elements and CSS declaration blocks within style attributes attached to specific SVG elements.
• 基于 指派属性值, 层叠和继承 的CSS2 规则.  CSS2 rules forassigning property values, cascading and inheritance.
• 样式表内的@font-face,@media, @import 和 @charset 规则.  @font-face, @media, @import and @charset rules within style sheets.
• CSS2的 动态伪类 :hover, :active 和 :focus 以及 伪类 :first-child, :visited, :link 和 :lang. 其余的 CSS2 伪类, 包括那些 生成内容的伪类, 不为精图语言定义的部分. (注意: 当选定一个精图元素时此元素便得到焦点. 参见 文本选取.)  CSS2's dynamic pseudo-classes :hover, :active and :focus and pseudo-classes :first-child, :visited, :link and :lang. The remaining CSS2 pseudo-classes, including those having to do withgenerated content, are not part of the SVG language definition. (Note: an SVG element gains focus when it is selected. SeeText selection.)
• 基于听觉媒体的目的, 精图表示可 CSS-样式 的XML 语法. 在支持听觉样式表的用户代理里, 可以使用在 [CSS2]中定义的CSS 听觉样式属性 . (参见听觉样式表.)  For the purposes of aural media, SVG represents a CSS-stylable XML grammar. In user agents that support aural style sheets,CSS aural style properties can be applied as defined in [CSS2]. (SeeAural style sheets.)
• 定义在一个 'style' 元素内的CSS 样式表要么可以直接为元素 'style' 的字符数据内容要么可以嵌入一个 CDATA 块中.  CSS style sheets defined within a 'style' element can be immediate character data content of the 'style' element or can be embedded within a CDATA block.

精图依照规则 [CSS2-ATRULES] 定义一个@color-profile来定义颜色配置 所以 ICC颜色配置可以用于CSS-样式的精图内容中 .  SVG defines an @color-profileat-rule [CSS2-ATRULES]for defining color profiles so that ICC color profiles can be applied toCSS-styled SVG content.

注意下述关于相对 URIs 和外部CSS 样式表的内容:  CSS2 规范 [CSS-URI] 中说在样式表中相对 URIs (如在 [RFC2396]定义的) 被分解使得基 URI 为样式表的URI , 而不是引用文档的URI .     Note thefollowing about relative URIs and external CSS style sheets: The CSS2specification [CSS-URI]says that relative URIs (as defined in [RFC2396]) within style sheetsare resolved such that the base URI is that of the style sheet, not that of thereferencing document.

6.8 属性名和属性值区分大小写 Case sensitivityof property names and values

在 XML [XML10]中经由表示属性表示的属性说明是区分大小写的. 而另一方面, 在 CSS 样式表中或在style属性中的CSS 属性说明除了某些例外(参见CSS2 规范的章节 4.1.3 字符和大小写 )并不区分大小写.    Property declarations via presentationattributes are expressed in XML [XML10],which is case-sensitive. CSS property declarations specified either in CSS stylesheets or in astyleattribute, on the other hand, are generally case-insensitive with someexceptions (see section4.1.3Characters and case in the CSS2 specification).

由于表示属性是按 XML 属性表示的, 故表示属性是区分大小写的进而必须与在"表示属性的实体定义"上面所列的名字严格匹配. 当使用一表示属性指定'fill' 属性的值, 表示属性必须指定为'fill' 而不能为 'FILL' 或者'Fill'. 关键词的值, 如在font-style="italic"中的 "italic"  , 也是区分大小写的故必须用规范中定义的给定的关键词的严格的大小写来指定. 例如, 关键词"sRGB" 必须有小写的 "s" 和大写的 "RGB".   Because presentation attributes areexpressed as XML attributes, presentation attributes are case-sensitive and mustmatch the exact name as listed under "Entitydefinitions for the presentation attributes", above. When using apresentation attribute to specify a value for the'fill' property, the presentation attribute must bespecified as 'fill'and not'FILL'or 'Fill'.Keyword values, such as "italic" infont-style="italic",are also case-sensitive and must be specified using the exact case used in thespecification which defines the given keyword. For example, the keyword"sRGB" must have lowercase "s" and uppercase"RGB".

在CSS样式表或在 style 属性中的属性说明必须遵从CSS 规则, 其一般不区分大小写. 但是, 为了提高不同方式表示样式属性的兼容性, 强烈建议作者使用如相关规范中定义的严格的属性名 (通常, 小写和连字号) 并且表示所有关键词使用表示属性所要求的相同的大小写而不利用 CSS忽略大小写的优点.   Propertydeclarations within CSS style sheets or in astyle attribute must only conform to CSS rules,which are generally more lenient with regard to case sensitivity. However, topromote consistency across the different ways for expressing stylingproperties, it is strongly recommended that authors use the exact propertynames (usually, lowercase letters and hyphens) as defined in the relevantspecification and express all keywords using the same case as is required bypresentation attributes and not take advantage of CSS's ability to ignore case.

6.9 精图借用来自CSS 和 XSL的功能 Facilities from CSS and XSL used bySVG

精图共享CSS和XSL的公共的各种各样相关的属性和处理方法 , 以及处理规则的很多语义. SVG shares various relevantproperties and approaches common to CSS and XSL, plus the semantics of many ofthe processing rules.

精图共享下列CSS和 XSL的功能:  SVG shares the following facilities with CSS and XSL:

• 共享的属性. 精图的许多属性是与CSS2, XSL和精图所共享的. (参见 共享属性列表).  Shared properties. Many of SVG's properties are shared between CSS2, XSL and SVG. (Seelist of shared properties).
• 语法规则. (正式的标准是 [CSS2 语法和基本数据类型] 和 [CSS2的语法].)   Syntax rules. (The normative references are [CSS2 syntax and basic data types] and [The grammar of CSS2].)
• 允许的数据类型. (正式的 标准是  [CSS2 语法和基本数据类型] ), 一个例外是精图允许无单位的<length> 值和 <angle> 值. (参见 单位.)   Allowable data types. (The normative reference is [CSS2 syntax and basic data types]), with the exception that SVG allows<length> and <angle> values without a unit identifier. See Units.)
• 继承规则.Inheritance rules.
• 来自CSS2对应用户环境的颜色的颜色关键词. (正式的 标准是  [CSS2 系统颜色].)   The color keywords from CSS2 that correspond to the colors used by objects in the user's environment. (The normative reference is [CSS2 system colors].)
• 对于支持 CSS 样式的精图内容的实现, 它的样式必须与在CSS中的各种各样其它规则兼容. (参见 使用CSS格式化 .)  For implementations that support CSS styling of SVG content, then that styling must be compatible with various other rules in CSS. (SeeStyling with CSS.)

6.10 引用外部的样式表Referencing externalstyle sheets

被引用的外部样式表使用在文档 "与XML文档版本1.0相关的样式表 " [XML-SS]中的机制.   External style sheets are referenced using the mechanismdocumented in "Associating Style Sheets with XML documents Version1.0" [XML-SS].

6.11 样式元素 'style' The 'style'element

元素 'style' 允许将样式表直接嵌入精图内容中. 精图的元素 'style' 与HTML中对应的元素具有相同的属性(参见 HTML的 'style' 元素). The 'style' element allows style sheets to beembedded directly within SVG content. SVG's 'style'element has the same attributes as the corresponding element in HTML (seeHTML's 'style' element).

<!ELEMENT style (#PCDATA) > <!ATTLIST style   %stdAttrs;   xml:space (preserve) #FIXED "preserve"   type %ContentType; #REQUIRED   media %MediaDesc; #IMPLIED   title %Text; #IMPLIED >

属性定义:Attribute definitions:

type =content-type

此属性指定元素内容的样式表语言.样式表语言作为一种内容类型来指定 (例如, "text/css"),如 经由 [RFC2045]所定义. 作者必须为此属性指定一个值; 不存在缺省值. This attribute specifies the style sheet language of the element'scontents. The style sheet language is specified as a content type (e.g.,"text/css"), as per [RFC2045].Authors must supply a value for this attribute; there is no default value.
Animatable:no.

media =media-descriptors

此属性指定样式信息将要使用的目标媒体. 可以为单个媒体描述子也可以为媒体描述子的列表. 属性的缺省值为所有 "all". 可辨识的媒体描述子的集合为由CSS2 [CSS2 识别的媒体类型]所辨识的媒体描述子的列表 .   This attribute specifies the intended destinationmedium for style information. It may be a single media descriptor or acomma-separated list. The default value for this attribute is "all".The set of recognizedmedia-descriptors are the list of media types recognized byCSS2 [CSS2Recognized media types].
Animatable:no.

title =advisory-title

(为了与 [HTML4]兼容) 此属性为 'style' 元素指定一个建议的标题. (For compatibility with [HTML4]) This attribute specifies anadvisory title for the 'style' element.
Animatable:no.

 

在别处定义的属性:Attributes defined elsewhere:

%stdAttrs;,xml:space.

样式数据的语法依赖于样式表语言. The syntax of style data depends on thestyle sheet language.

某些样式表语言可以允许在'style' 元素中比在 style 属性中具有较多的规则. 例如, 对于 CSS, 可以在一个 'style' 元素中声明的规则却不能在style 属性中声明.Some style sheet languages might allow a wider variety of rules inthe 'style' element than in thestyle attribute. Forexample, with CSS, rules can be declared within a 'style'element that cannot be declared within a styleattribute.

在上面已经提供一个说明 'style' 元素的例子 (参见 例子).  An example showing the'style' element is provided above (see example).

6.12 类属性 class  The class attribute

属性定义:Attribute definitions:

class = list

此属性给一个元素指派一个类名或一套类名. 任意多个元素可以被指派同一个类名或同一套类名. 多个类名必须用空格分开.   This attribute assigns a class name or set of classnames to an element. Any number of elements may be assigned the same class nameor names. Multiple class names must be separated by white space characters.
Animatable:yes.

class 属性指派一个类名或一套类名给一个元素. 可以说此元素属于这些类. 一个类名可以由几个元素实例所共享. 类属性有几种角色:  The classattribute assigns one or more class names to an element. The element may besaid to belong to these classes. A class name may be shared by several elementinstances. The class attribute has several roles:

• 作为一个样式表选择子 (当作者希望将样式信息指派给一套元素时). As a style sheet selector (when an author wishes to assign style information to a set of elements).
• 由用户代理进行一般目的处理. For general purpose processing by user agents.

在下列例子里, 文本 'text' 元素联合类 class 属性标记文档消息. 消息以英文版和法文版呈现.   In the followingexample, the 'text' element is used in conjunction with the class attribute to markup document messages. Messagesappear in both English and French versions.

<!-- English messages -->

<text class="info" lang="en">Variable declared twice</text>

<text class="warning" lang="en">Undeclared variable</text>

<text class="error" lang="en">Bad syntax for variable name</text>

<!-- French messages -->

<text class="info" lang="fr">Variable déclarée deux fois</text>

<text class="warning" lang="fr">Variable indéfinie</text>

<text class="error" lang="fr">Erreur de syntaxe pour variable</text>

在一个支持CSS样式的精图用户代理中 , 下列样式规则将告诉可视用户代理显示通知消息用绿色, 警告消息用黄色, 而错误消息用红色:    In an SVG useragent that supportsCSSstyling, the following CSS style rules would tell visual user agents todisplay informational messages in green, warning messages in yellow, and errormessages in red:

text.info    { color: green }

text.warning { color: yellow }

text.error   { color: red }

6.13 样式属性 style  The style attribute

样式 style 属性允许每一元素样式规则直接指派给一个给定的元素. 当使用 CSS 样式时, CSS 内联样式通过样式 style属性中由分号分隔的形如"名字:值"的属性声明所指定   The style attribute allowsper-element style rules to be specified directly on a given element. When CSS stylingis used, CSS inline style is specified by including semicolon-separatedproperty declarations of the form "name : value" within the style attribute

属性定义:Attribute definitions:

style = style

此属性给当前元素指定样式信息. 样式属性给单个元素指定样式信息. 内联样式规则的样式表语言通过精图'svg' 元素上的contentStyleType属性值来给定. 样式数据的语法依赖于样式表语言.   Thisattribute specifies style information for the current element. The styleattribute specifies style information for a single element. The style sheetlanguage of inline style rules is given by the value of attributecontentStyleTypeon the 'svg' element. The syntax of style data dependson the style sheet language.
Animatable:no.

样式属性可以用来对一个单独的精图元素指定特殊的样式. 如果样式将重用于几个元素, 作者应当使用样式 'style' 元素来重组这些信息. 为了达到最好的灵活性, 作者应该按外部样式表的形式定义样式.   The styleattribute may be used to apply a particular style to an individual SVG element.If the style will be reused for several elements, authors should use the'style' element to regroup that information. Foroptimal flexibility, authors should define styles in external style sheets.

上面提供了一个说明样式 style 属性的例子 (参见 例子). An example showing the style attribute is provided above (see example).

6.14 指定缺省的样式表语言 Specifying thedefault style sheet language

精图 'svg' 元素上的样式类型 contentStyleType 属性为给定的文档片段指定缺省的样式表语言.   The contentStyleTypeattribute on the'svg' element specifies the default style sheetlanguage for the given document fragment.

contentStyleType = "%ContentType;"

标识给定文档的缺省样式表语言 .此属性为可用于很多元素的样式 style 属性设置样式表语言. 值 %ContentType; 指定媒体类型, 参见 [RFC2045]. 其缺省值为 "text/css".     Identifies thedefault style sheet language for the given document. This attribute sets thestyle sheet language for the style attributes that are available on manyelements. The value %ContentType; specifies amedia type, per [RFC2045].The default value is "text/css".
Animatable:no.

6.15 属性继承 Propertyinheritance

不管用户代理是否支持 CSS, 精图的属性继承遵从在CSS2规范中定义的属性继承规则. 属性继承的正式定义在CSS2 规范的章节 6.2 中 (参见 继承).    Whether or not the useragent supports CSS, property inheritance in SVG follows the propertyinheritance rules defined in the CSS2 specification. The normative definitionfor property inheritance is section 6.2 of the CSS2 specification (seeInheritance).

每个属性的定义都标明了是否此属性可以从它的父辈中继承其值.   The definition ofeach property indicates whether the property can inherit the value of itsparent.

在精图中, 和在 CSS2中一样, 大多数元素继承计算值[CSS2-COMPUTED].对于那些不从计算值继承的情况, 属性定义将描述继承的规则. 对于以用户单位表示的特殊的值 [CSS2-SPECIFIED], 如以像素 (例如, "20px") 或以绝对值 [CSS2-COMPUTED],其计算值等于特殊的值. 对于那些用某些相对单位表示的特殊的值(即,em, ex和 百分比), 其计算值将与相对值有相同的单位. 于是, 如果父元素有"10pt"的'font-size' 而当前元素有"120%"的'font-size' , 那么当前元素 'font-size' 的计算值为 "12pt". 在相对单位的引用值不用任何标准的精图单位(即, CSS 单位或用户单位)表示的情况下 , 例如当使用相对于当前的视口或者一个对象的边界框的百分比, 那么计算值将以用户单位来表示.     In SVG, as in CSS2, most elements inheritcomputed values [CSS2-COMPUTED].For cases where something other than computed values are inherited, theproperty definition will describe the inheritance rules. For specified values [CSS2-SPECIFIED]which are expressed in user units, in pixels (e.g., "20px") or inabsolute values [CSS2-COMPUTED],the computed value equals the specified value. For specified values which usecertain relative units (i.e.,em, exand percentages), the computed value will have the same units as the value towhich it is relative. Thus, if the parent element has a 'font-size'of "10pt" and the current element has a 'font-size'of "120%", then the computed value for 'font-size'on the current element will be "12pt". In cases where the referencedvalue for relative units is not expressed in any of the standard SVG units(i.e., CSS units or user units), such as when a percentage is used relative tothe current viewport or an object bounding box, then the computed value will bein user units.

注意精图具有某些功能当在其上级元素上指定的一个属性对下级元素会产生影响, 即使下级元素给此属性指定了不同的值. 例如, 如果 'clip-path' 属性在一个上级元素上被指定, 而当前元素有一个值为'none'的 'clip-path' 属性, 上级的剪裁路径仍然应用于当前的元素因为精图语句的语义为用于一个元素上的剪裁路径是本身和所有上级剪裁路径的交集. 关键概念是属性赋值(具有可能的属性继承) 先发生. 在属性值赋值到各种元素之后,用户代理使用每个赋值属性的语义, 其结果是一个上级元素属性的赋值影响下级的渲染.   Note that SVG has some facilities wherein a propertywhich is specified on an ancestor element might effect its descendant element,even if the descendant element has a different assigned value for thatproperty. For example, if a'clip-path' property is specified on an ancestorelement, and the current element has a'clip-path' of 'none',the ancestor's clipping path still applies to the current element because thesemantics of SVG state that the clipping path used on a given element is theintersection of all clipping paths specified on itself and all ancestorelements. The key concept is that property assignment (with possible propertyinheritance) happens first. After properties values have been assigned to thevarious elements, then the user agent applies the semantics of each assignedproperty, which might result in the property assignment of an ancestor elementaffecting the rendering of its descendants.

6.16 样式的作用域 The scope/range ofstyles

下面定义样式表的作用域:   The following define thescope/range of style sheets:

单独的精图文档 Stand-alone SVG document

存在一棵分析树. 在精图文档的任何地方 (在样式元素或样式属性, 或者一个与样式表处理指令相链接的外部样式表)定义的样式表作用于整个精图文档. There is one parse tree.Style sheets defined anywhere within the SVG document (in style elements orstyle attributes, or in external style sheets linked with the style sheetprocessing instruction) apply across the entire SVG document.

通过'img', 'object' (HTML) 或 'image' (精图) 元素嵌入HTML 或 XML 文档的单独的精图文档     Stand-alone SVG document embedded in anHTML or XML document with the 'img', 'object' (HTML) or'image' (SVG) elements

存在两棵完全分离的分析树; 一棵是针对引用文档的 (也许为 HTML 或者为XHTML), 而另一个则针对精图文档. 在引用文档的任何地方定义的样式表(在样式元素或样式属性, 或者一个与样式表处理指令相链接的外部样式表) 作用于整个引用文档但对被引用的精图文档不起作用 . 在被引用的精图文档任何地方定义的样式表(在样式元素或样式属性, 或者一个与样式表处理指令相链接的外部样式表) 作用于整个被引用的精图文档但对引用文档 (也许为 HTML 或者为 XHTML)不起作用.  要想得到作用于 [X]HTML文档又作用于精图文档的样式, 需要将它们链接到相同的样式表.   There are twocompletely separate parse trees; one for the referencing document (perhaps HTMLor XHTML), and one for the SVG document. Style sheets defined anywhere withinthe referencing document (in style elements or style attributes, or in externalstyle sheets linked with the style sheet processing instruction) apply acrossthe entire referencing document but have no effect on the referenced SVGdocument. Style sheets defined anywhere within the referenced SVG document (instyle elements or style attributes, or in external style sheets linked with thestyle sheet processing instruction) apply across the entire SVG document, butdo not affect the referencing document (perhaps HTML or XHTML). To get the samestyling across both the [X]HTML document and the SVG document, link them bothto the same style sheet.

以文本形式包含在 XML 文档中的单独的精图内容Stand-alone SVG content textually included in an XML document

存在一棵分析树, 使用多个命名空间; 在精图命名空间中可以有一棵或多棵子树. 在XML 文档的任何地方定义的样式表 (在样式元素或样式属性, 或者一个与样式表处理指令相链接的外部样式表) 作用于整个文档, 包括在精图命名空间的部分. 要想给精图部分设置不同的样式, 使用样式属性, 或在精图 'svg'元素上设置一个 ID 并且使用上下文CSS 选择子或  XSL选择子 .    There is asingle parse tree, using multiple namespaces; one or more subtrees are in theSVG namespace. Style sheets defined anywhere within the XML document (in styleelements or style attributes, or in external style sheets linked with the stylesheet processing instruction) apply across the entire document, including thoseparts of it in the SVG namespace. To get different styling for the SVG part,use the style attribute, or put an ID on the 'svg' element and use contextualCSS selectors, or use XSL selectors.

6.17 用户代理样式表 User agent stylesheet

用户代理将为精图命名空间的元素和可视媒体 [CSS2-VISUAL]维持一个用户代理样式表[CSS2-CASCADE-RULES]. 在下面的用户代理样式表以CSS 语法表示; 但是, 用户代理必须支持对应于此缺省样式表的行为即使它不支持CSS样式表:    The user agent shall maintain a user agent style sheet[CSS2-CASCADE-RULES]for elements in the SVG namespace for visual media [CSS2-VISUAL].The user agent style sheet below is expressed using CSS syntax; however, useragents are required to support the behavior that corresponds to this defaultstyle sheet even if CSS style sheets are not supported in the user agent:

svg, symbol, image, marker, pattern, foreignObject { overflow: hidden }

svg { width:attr(width); height:attr(height) }

上述用户代理样式表的第一行生成在初始视口上建立的初始剪裁路径  . 进一步, 将根据所列元素的边界建立新的剪裁路径, 所有这些为 建立新的视口的元素. (参考精图使用 'overflow' 属性的描述以获取更多的信息.)  The first line of the above user agent style sheet will cause theinitialclipping path to be established at the bounds of the initial viewport.Furthermore, it will cause new clipping paths to be established at the boundsof the listed elements, all of which areelementsthat establish a new viewport. (Refer to the description of SVG's use ofthe'overflow' property for more information.)

上述用户代理样式表的第二行使得精图 'svg' 元素上的宽度 width 和高度 height 属性作为在[CSS2-LAYOUT]中定义的宽度'width' 和高度'height' 属性的缺省值 .   The second line of theabove user agent style sheet will cause the width and height attributes on the 'svg' element to be used as the default valuesfor the 'width'and 'height'properties during [CSS2-LAYOUT].

6.18 听觉样式表 Aural style sheets

针对听觉媒体, 精图表示可样式的 XML 语法. 对于支持CSS听觉样式表的用户代理而言, 可以使用在[CSS2]中定义的听觉样式属性[CSS2-AURAL].  For the purposes of aural media, SVG represents a stylable XML grammar.In user agents that support CSS aural style sheets, aural style properties [CSS2-AURAL] can be appliedas defined in [CSS2].

听觉样式属性能够用于任何包含字符数据内容的精图元素, 包括 'desc', 'title, 'tspan'. 'tref'. 'altGlyph' 和 'textPath'. 对于支持听觉样式表的用户代理, 可以使用下列 [CSS2] 属性:  Aural style properties can be applied to any SVG element that can containcharacter data content, including'desc', 'title, 'tspan'. 'tref'. 'altGlyph' and 'textPath'. On user agents that support auralstyle sheets, the following [CSS2]properties can be applied:

	'azimuth'		[CSS2-azimuth]
	'cue'		[CSS2-cue]
	'cue-after'		[CSS2-cue-after]
	'cue-before'		[CSS2-cue-before]
	'elevation'		[CSS2-elevation]
	'pause'		[CSS2-pause]
	'pause-after'		[CSS2-pause-after]
	'pause-before'		[CSS2-pause-before]
	'pitch'		[CSS2-pitch]
	'pitch-range'		[CSS2-pitch-range]
	'play-during'		[CSS2-play-during]
	'richness'		[CSS2-richness]
	'speak'		[CSS2-speak]
	'speak-header'		[CSS2-speak-header]
	'speak-numeral'		[CSS2-speak-numeral]
	'speak-punctuation'		[CSS2-speak-punctuation]
	'speech-rate'		[CSS2-speech-rate]
	'stress'		[CSS2-stress]
	'voice-family'		[CSS2-voice-family]
	'volume'		[CSS2-volume]

对于支持听觉样式表和支持 [DOM2]的用户代理, 要求用户代理支持与听觉属性 [CSS2-AURAL]相对应的在 [DOM2-CSS]中定义的文档对象模型接口. (参见 与 DOM2 CSS 对象模型的关系.)   For user agents that supportaural style sheets and also support [DOM2],the user agent is required to support the DOM interfaces defined in [DOM2-CSS] thatcorrespond to aural properties [CSS2-AURAL]. (SeeRelationshipwith DOM2 CSS object model.)

6.19 文档对象模型接口 DOM interfaces

下列接口定义如下: SVGStyleElement. The following interfaces are defined below: SVGStyleElement.

 

接口 SVGStyleElement   Interface SVGStyleElement

接口 SVGStyleElement 对应 'style' 元素.  The SVGStyleElementinterface corresponds to the 'style' element.

IDL 定义   IDL Definition

interface SVGStyleElement : SVGElement { 

           attribute DOMString xmlspace;

                       // raises DOMException on setting

           attribute DOMString type;

                       // raises DOMException on setting

           attribute DOMString media;

                       // raises DOMException on setting

           attribute DOMString title;

                       // raises DOMException on setting

};

 

属性 Attributes

DOMString xmlspace

对应于给定元素的属性 xml:space . Corresponds to attribute xml:space on the given element.

Exceptions on setting

DOMException

NO_MODIFICATION_ALLOWED_ERR: 当企图改变只读属性的值时发生 Raised on an attempt to change the value of a readonly attribute.

DOMString type

对应于给定'style' 元素的属性 type.Corresponds to attribute type on the given 'style' element.

Exceptions on setting

DOMException

NO_MODIFICATION_ALLOWED_ERR: 当企图改变只读属性的值时发生 Raised on an attempt to change the value of a readonly attribute.

DOMString media

对应于给定'style' 元素的属性 media Corresponds to attribute media on the given 'style' element.

Exceptions on setting

DOMException

NO_MODIFICATION_ALLOWED_ERR: 当企图改变只读属性的值时发生 Raised on an attempt to change the value of a readonly attribute.

DOMString title

对应于给定'style' 元素的属性 title Corresponds to attribute title on the given 'style' element.

Exceptions on setting

DOMException

NO_MODIFICATION_ALLOWED_ERR: 当企图改变只读属性的值时发生 Raised on an attempt to change the value of a readonly attribute.

---

previous next   contents   elements   attributes   properties   index