svg中文手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
directory search
Scalable Vector Graphics (SVG) 1.1 (Second Edition) 1 Introduction 1.1 About SVG 1.2 SVG MIME type 1.3 SVG Namespace 1.4 Compatibility with Other Standards Efforts 1.5 Terminology 1.6 Definitions 2 Concepts 2.1 Explaining the name: SVG 2.2 Important SVG concepts 2.3 Options for using SVG in Web pages 3 Rendering Model 3.1 Introduction 3.2 The painters model 3.3 Rendering Order 3.4 How groups are rendered 3.5 How elements are rendered 3.6 Types of graphics elements 3.6.1 Painting shapes and text 3.6.2 Painting raster images 3.7 Filtering painted regions 3.8 Clipping 3.9 Parent Compositing 4 Basic Data Types and Interfaces 4.1 Syntax 4.2 Basic data types 4.3 Real number precision 4.4 Recognized color keyword names 4.5 Basic DOM interfaces 4.5.1 Interface SVGElement 4.5.2 Interface SVGAnimatedBoolean 4.5.3 Interface SVGAnimatedString 4.5.4 Interface SVGStringList 4.5.5 Interface SVGAnimatedEnumeration 4.5.6 Interface SVGAnimatedInteger 4.5.7 Interface SVGNumber 4.5.8 Interface SVGAnimatedNumber 4.5.9 Interface SVGNumberList 4.5.10 Interface SVGAnimatedNumberList 4.5.11 Interface SVGLength 4.5.12 Interface SVGAnimatedLength 4.5.13 Interface SVGLengthList 4.5.14 Interface SVGAnimatedLengthList 4.5.15 Interface SVGAngle 4.5.16 Interface SVGAnimatedAngle 4.5.17 Interface SVGColor 4.5.18 Interface SVGICCColor 4.5.19 Interface SVGRect 4.5.20 Interface SVGAnimatedRect 4.5.21 Interface SVGUnitTypes 4.5.22 Interface SVGStylable 4.5.23 Interface SVGLocatable 4.5.24 Interface SVGTransformable 4.5.25 Interface SVGTests 4.5.26 Interface SVGLangSpace 4.5.27 Interface SVGExternalResourcesRequired 4.5.28 Interface SVGFitToViewBox 4.5.29 Interface SVGZoomAndPan 4.5.30 Interface SVGViewSpec 4.5.31 Interface SVGURIReference 4.5.32 Interface SVGCSSRule 4.5.33 Interface SVGRenderingIntent 5 Document Structure 5.1 Defining an SVG document fragment: the 憇vg?element 5.1.1 Overview 5.1.2 The 憇vg?element 5.2 Grouping: the 慻?element 5.2.1 Overview 5.2.2 The 慻?element 5.3 Defining content for reuse 5.3.1 Overview 5.3.2 The 慸efs?element 5.4 The 慸esc?and 憈itle?elements 5.5 The 憇ymbol?element 5.6 The 憉se?element 5.7 The 慽mage?element 5.8 Conditional processing 5.8.1 Conditional processing overview 5.8.2 The 憇witch?element 5.8.3 The 憆equiredFeatures?attribute 5.8.4 The 憆equiredExtensions?attribute 5.8.5 The 憇ystemLanguage?attribute 5.8.6 Applicability of test attributes 5.9 Specifying whether external resources are required for proper rendering 5.10 Common attributes 5.10.1 Attributes common to all elements: 慽d?and 憍ml:base? 5.10.2 The 憍ml:lang?and 憍ml:space?attributes 5.11 DOM interfaces 5.11.1 Interface SVGDocument 5.11.2 Interface SVGSVGElement 5.11.3 Interface SVGGElement 5.11.4 Interface SVGDefsElement 5.11.5 Interface SVGDescElement 5.11.6 Interface SVGTitleElement 5.11.7 Interface SVGSymbolElement 5.11.8 Interface SVGUseElement 5.11.9 Interface SVGElementInstance 5.11.10 Interface SVGElementInstanceList 5.11.11 Interface SVGImageElement 5.11.12 Interface SVGSwitchElement 5.11.13 Interface GetSVGDocument 6 Styling 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 Styling with XSL 6.6 Styling with CSS 6.7 Case sensitivity of property names and values 6.8 Facilities from CSS and XSL used by SVG 6.9 Referencing external style sheets 6.10 The 憇tyle?element 6.11 The 慶lass?attribute 6.12 The 憇tyle?attribute 6.13 Specifying the default style sheet language 6.14 Property inheritance 6.15 The scope/range of styles 6.16 User agent style sheet 6.17 Aural style sheets 6.18 DOM interfaces 6.18.1 Interface SVGStyleElement 7 Coordinate Systems 7.1 Introduction 7.2 The initial viewport 7.3 The initial coordinate system 7.4 Coordinate system transformations 7.5 Nested transformations 7.6 The 憈ransform?attribute 7.7 The 憊iewBox?attribute 7.8 The 憄reserveAspectRatio?attribute 7.9 Establishing a new viewport 7.10 Units 7.11 Object bounding box units 7.12 Intrinsic sizing properties of the viewport of SVG content 7.13 Geographic coordinate systems 7.14 The 憇vg:transform?attribute 7.15 DOM interfaces 7.15.1 Interface SVGPoint 7.15.2 Interface SVGPointList 7.15.3 Interface SVGMatrix 7.15.4 Interface SVGTransform 7.15.5 Interface SVGTransformList 7.15.6 Interface SVGAnimatedTransformList 7.15.7 Interface SVGPreserveAspectRatio 7.15.8 Interface SVGAnimatedPreserveAspectRatio 8 Paths 8.1 Introduction 8.2 The 憄ath?element 8.3 Path data 8.3.1 General information about path data 8.3.2 The "moveto" commands 8.3.3 The "closepath" command 8.3.4 The "lineto" commands 8.3.5 The curve commands 8.3.6 The cubic B閦ier curve commands 8.3.7 The quadratic B閦ier curve commands 8.3.8 The elliptical arc curve commands 8.3.9 The grammar for path data 8.4 Distance along a path 8.5 DOM interfaces 8.5.1 Interface SVGPathSeg 8.5.2 Interface SVGPathSegClosePath 8.5.3 Interface SVGPathSegMovetoAbs 8.5.4 Interface SVGPathSegMovetoRel 8.5.5 Interface SVGPathSegLinetoAbs 8.5.6 Interface SVGPathSegLinetoRel 8.5.7 Interface SVGPathSegCurvetoCubicAbs 8.5.8 Interface SVGPathSegCurvetoCubicRel 8.5.9 Interface SVGPathSegCurvetoQuadraticAbs 8.5.10 Interface SVGPathSegCurvetoQuadraticRel 8.5.11 Interface SVGPathSegArcAbs 8.5.12 Interface SVGPathSegArcRel 8.5.13 Interface SVGPathSegLinetoHorizontalAbs 8.5.14 Interface SVGPathSegLinetoHorizontalRel 8.5.15 Interface SVGPathSegLinetoVerticalAbs 8.5.16 Interface SVGPathSegLinetoVerticalRel 8.5.17 Interface SVGPathSegCurvetoCubicSmoothAbs 8.5.18 Interface SVGPathSegCurvetoCubicSmoothRel 8.5.19 Interface SVGPathSegCurvetoQuadraticSmoothAbs 8.5.20 Interface SVGPathSegCurvetoQuadraticSmoothRel 8.5.21 Interface SVGPathSegList 8.5.22 Interface SVGAnimatedPathData 8.5.23 Interface SVGPathElement 9 Basic Shapes 9.1 Introduction 9.2 The 憆ect?element 9.3 The 慶ircle?element 9.4 The 慹llipse?element 9.5 The 憀ine?element 9.6 The 憄olyline?element 9.7 The 憄olygon?element 9.7.1 The grammar for points specifications in 憄olyline?and 憄olygon?elements 9.8 DOM interfaces 9.8.1 Interface SVGRectElement 9.8.2 Interface SVGCircleElement 9.8.3 Interface SVGEllipseElement 9.8.4 Interface SVGLineElement 9.8.5 Interface SVGAnimatedPoints 9.8.6 Interface SVGPolylineElement 9.8.7 Interface SVGPolygonElement 10 Text 10.1 Introduction 10.2 Characters and their corresponding glyphs 10.3 Fonts 10.4 The 憈ext?element 10.5 The 憈span?element 10.6 The 憈ref?element 10.7 Text layout 10.7.1 Text layout introduction 10.7.2 Setting the inline-progression-direction 10.7.3 Glyph orientation within a text run 10.7.4 Relationship with bidirectionality 10.8 Text rendering order 10.9 Alignment properties 10.9.1 Text alignment properties 10.9.2 Baseline alignment properties 10.10 Font selection properties 10.11 Spacing properties 10.12 Text decoration 10.13 Text on a path 10.13.1 Introduction to text on a path 10.13.2 The 憈extPath?element 10.13.3 Text on a path layout rules 10.14 Alternate glyphs 10.14.1 The 慳ltGlyph?element 10.14.2 The 慳ltGlyphDef? 慳ltGlyphItem?and 慻lyphRef?elements 10.15 White space handling 10.16 Text selection and clipboard operations 10.17 DOM interfaces 10.17.1 Interface SVGTextContentElement 10.17.2 Interface SVGTextPositioningElement 10.17.3 Interface SVGTextElement 10.17.4 Interface SVGTSpanElement 10.17.5 Interface SVGTRefElement 10.17.6 Interface SVGTextPathElement 10.17.7 Interface SVGAltGlyphElement 10.17.8 Interface SVGAltGlyphDefElement 10.17.9 Interface SVGAltGlyphItemElement 10.17.10 Interface SVGGlyphRefElement 11 Painting: Filling 11.1 Introduction 11.2 Specifying paint 11.3 Fill Properties 11.4 Stroke Properties 11.5 Controlling visibility 11.6 Markers 11.6.1 Introduction 11.6.2 The 憁arker?element 11.6.3 Marker properties 11.6.4 Details on how markers are rendered 11.7 Rendering properties 11.7.1 Color interpolation properties: 慶olor-interpolation?and 慶olor-interpolation-filters? 11.7.2 The 慶olor-rendering?property 11.7.3 The 憇hape-rendering?property 11.7.4 The 憈ext-rendering?property 11.7.5 The 慽mage-rendering?property 11.8 Inheritance of painting properties 11.9 DOM interfaces 11.9.1 Interface SVGPaint 11.9.2 Interface SVGMarkerElement 12 Color 12.1 Introduction 12.2 The 慶olor?property 12.3 Color profile descriptions 12.3.1 Overview of color profile descriptions 12.3.2 Alternative ways of defining a color profile description 12.3.3 The 慶olor-profile?element 12.3.4 The CSS @color-profile rule 12.3.5 The 慶olor-profile?property 12.4 DOM interfaces 12.4.1 Interface SVGColorProfileElement 12.4.2 Interface SVGColorProfileRule 13 Gradients and Patterns 13.1 Introduction 13.2 Gradients 13.2.1 Introduction 13.2.2 Linear gradients 13.2.3 Radial gradients 13.2.4 Gradient stops 13.3 Patterns 13.4 DOM interfaces 13.4.1 Interface SVGGradientElement 13.4.2 Interface SVGLinearGradientElement 13.4.3 Interface SVGRadialGradientElement 13.4.4 Interface SVGStopElement 13.4.5 Interface SVGPatternElement 14 Clipping 14.1 Introduction 14.2 Simple alpha compositing 14.3 Clipping paths 14.3.1 Introduction 14.3.2 The initial clipping path 14.3.3 The 憃verflow?and 慶lip?properties 14.3.4 Clip to viewport vs. clip to 憊iewBox? 14.3.5 Establishing a new clipping path: the 慶lipPath?element 14.3.6 Clipping paths 14.4 Masking 14.5 Object and group opacity: the 憃pacity?property 14.6 DOM interfaces 14.6.1 Interface SVGClipPathElement 14.6.2 Interface SVGMaskElement 15 Filter Effects 15.1 Introduction 15.2 An example 15.3 The 慺ilter?element 15.4 The 慺ilter?property 15.5 Filter effects region 15.6 Accessing the background image 15.7 Filter primitives overview 15.7.1 Overview 15.7.2 Common attributes 15.7.3 Filter primitive subregion 15.8 Light source elements and properties 15.8.1 Introduction 15.8.2 Light source 慺eDistantLight? 15.8.3 Light source 慺ePointLight? 15.8.4 Light source 慺eSpotLight? 15.8.5 The 憀ighting-color?property 15.9 Filter primitive 慺eBlend? 15.10 Filter primitive 慺eColorMatrix? 15.11 Filter primitive 慺eComponentTransfer? 15.12 Filter primitive 慺eComposite? 15.13 Filter primitive 慺eConvolveMatrix? 15.14 Filter primitive 慺eDiffuseLighting? 15.15 Filter primitive 慺eDisplacementMap? 15.16 Filter primitive 慺eFlood? 15.17 Filter primitive 慺eGaussianBlur? 15.18 Filter primitive 慺eImage? 15.19 Filter primitive 慺eMerge? 15.20 Filter primitive 慺eMorphology? 15.21 Filter primitive 慺eOffset? 15.22 Filter primitive 慺eSpecularLighting? 15.23 Filter primitive 慺eTile? 15.24 Filter primitive 慺eTurbulence? 15.25 DOM interfaces 15.25.1 Interface SVGFilterElement 15.25.2 Interface SVGFilterPrimitiveStandardAttributes 15.25.3 Interface SVGFEBlendElement 15.25.4 Interface SVGFEColorMatrixElement 15.25.5 Interface SVGFEComponentTransferElement 15.25.6 Interface SVGComponentTransferFunctionElement 15.25.7 Interface SVGFEFuncRElement 15.25.8 Interface SVGFEFuncGElement 15.25.9 Interface SVGFEFuncBElement 15.25.10 Interface SVGFEFuncAElement 15.25.11 Interface SVGFECompositeElement 15.25.12 Interface SVGFEConvolveMatrixElement 15.25.13 Interface SVGFEDiffuseLightingElement 15.25.14 Interface SVGFEDistantLightElement 15.25.15 Interface SVGFEPointLightElement 15.25.16 Interface SVGFESpotLightElement 15.25.17 Interface SVGFEDisplacementMapElement 15.25.18 Interface SVGFEFloodElement 15.25.19 Interface SVGFEGaussianBlurElement 15.25.20 Interface SVGFEImageElement 15.25.21 Interface SVGFEMergeElement 15.25.22 Interface SVGFEMergeNodeElement 15.25.23 Interface SVGFEMorphologyElement 15.25.24 Interface SVGFEOffsetElement 15.25.25 Interface SVGFESpecularLightingElement 15.25.26 Interface SVGFETileElement 15.25.27 Interface SVGFETurbulenceElement 16 Interactivity 16.1 Introduction 16.2 Complete list of supported events 16.3 User interface events 16.4 Pointer events 16.5 Hit-testing and processing order for user interface events 16.5.1 Hit-testing 16.5.2 Event processing 16.6 The 憄ointer-events?property 16.7 Magnification and panning 16.8 Cursors 16.8.1 Introduction to cursors 16.8.2 The 慶ursor?property 16.8.3 The 慶ursor?element 16.9 DOM interfaces 16.9.1 Interface SVGCursorElement 17 Linking 17.1 References 17.1.1 Overview 17.1.2 IRIs and URIs 17.1.3 Syntactic forms: IRI and FuncIRI 17.1.4 Processing of IRI references 17.1.5 IRI reference attributes 17.2 Links out of SVG content: the 慳?element 17.3 Linking into SVG content: IRI fragments and SVG views 17.3.1 Introduction: IRI fragments and SVG views 17.3.2 SVG fragment identifiers 17.3.3 Predefined views: the 憊iew?element 17.3.4 Highlighting views 17.4 DOM interfaces 17.4.1 Interface SVGAElement 17.4.2 Interface SVGViewElement 18 Scripting 18.1 Specifying the scripting language 18.1.1 Specifying the default scripting language 18.1.2 Local declaration of a scripting language 18.2 The 憇cript?element 18.3 Event handling 18.4 Event attributes 18.4.1 Event attribute for the SVGLoad event 18.4.2 Event attributes on graphics and container elements 18.4.3 Document-level event attributes 18.4.4 Animation event attributes 18.5 DOM interfaces 18.5.1 Interface SVGScriptElement 18.5.2 Interface SVGZoomEvent 19 Animation 19.1 Introduction 19.2 Animation elements 19.2.1 Overview 19.2.2 Relationship to SMIL Animation 19.2.3 Animation elements example 19.2.4 Attributes to identify the target element for an animation 19.2.5 Attributes to identify the target attribute or property for an animation 19.2.6 Animation with namespaces 19.2.7 Paced animation and complex types 19.2.8 Attributes to control the timing of the animation 19.2.8.1 Clock values 19.2.9 Attributes that define animation values over time 19.2.10 Attributes that control whether animations are additive 19.2.11 Inheritance 19.2.12 The 慳nimate?element 19.2.13 The 憇et?element 19.2.14 The 慳nimateMotion?element 19.2.15 The 慳nimateColor?element 19.2.16 The 慳nimateTransform?element 19.2.17 Elements 19.3 Animation using the SVG DOM 19.4 DOM interfaces 19.4.1 Interface ElementTimeControl 19.4.2 Interface TimeEvent 19.4.3 Interface SVGAnimationElement 19.4.4 Interface SVGAnimateElement 19.4.5 Interface SVGSetElement 19.4.6 Interface SVGAnimateMotionElement 19.4.7 Interface SVGMPathElement 19.4.8 Interface SVGAnimateColorElement 19.4.9 Interface SVGAnimateTransformElement 20 Fonts 20.1 Introduction 20.2 Overview of SVG fonts 20.3 The 慺ont?element 20.4 The 慻lyph?element 20.5 The 憁issing-glyph?element 20.6 Glyph selection rules 20.7 The 慼kern?and 憊kern?elements 20.8 Describing a font 20.8.1 Overview of font descriptions 20.8.2 Alternative ways for providing a font description 20.8.3 The 慺ont-face?element 20.8.4 The 慺ont-face-src?element 20.8.5 The 慺ont-face-uri?and 慺ont-face-format?elements 20.8.6 The 慺ont-face-name?element 20.9 DOM interfaces 20.9.1 Interface SVGFontElement 20.9.2 Interface SVGGlyphElement 20.9.3 Interface SVGMissingGlyphElement 20.9.4 Interface SVGHKernElement 20.9.5 Interface SVGVKernElement 20.9.6 Interface SVGFontFaceElement 20.9.7 Interface SVGFontFaceSrcElement 20.9.8 Interface SVGFontFaceUriElement 20.9.9 Interface SVGFontFaceFormatElement 20.9.10 Interface SVGFontFaceNameElement 21 Metadata 21.1 Introduction 21.2 The 憁etadata?element 21.3 An example 21.4 DOM interfaces 21.4.1 Interface SVGMetadataElement 22 Backwards Compatibility 23 Extensibility 23.1 Foreign namespaces and private data 23.2 Embedding foreign object types 23.3 The 慺oreignObject?element 23.4 An example 23.5 Adding private elements and attributes to the DTD 23.6 DOM interfaces 23.6.1 Interface SVGForeignObjectElement Appendix A: Document Type Definition A.1 Introduction A.2 Modularization A.2.1 Element and attribute collections A.2.2 Profiling the SVG specification A.2.3 Practical considerations A.3 SVG 1.1 module definitions and DTD implementations A.3.1 Modular Framework Module A.3.2 Datatypes Module A.3.3 Qualified Name Module A.3.4 Core Attribute Module A.3.5 Container Attribute Module A.3.6 Viewport Attribute Module A.3.7 Paint Attribute Module A.3.8 Basic Paint Attribute Module A.3.9 Paint Opacity Attribute Module A.3.10 Graphics Attribute Module A.3.11 Basic Graphics Attribute Module A.3.12 Document Events Attribute Module A.3.13 Graphical Element Events Attribute Module A.3.14 Animation Events Attribute Module A.3.15 XLink Attribute Module A.3.16 External Resources Attribute Module A.3.17 Structure Module A.3.18 Basic Structure Module A.3.19 Conditional Processing Module A.3.20 Image Module A.3.21 Style Module A.3.22 Shape Module A.3.23 Text Module A.3.24 Basic Text Module A.3.25 Marker Module A.3.26 Color Profile Module A.3.27 Gradient Module A.3.28 Pattern Module A.3.29 Clip Module A.3.30 Basic Clip Module A.3.31 Mask Module A.3.32 Filter Module A.3.33 Basic Filter Module A.3.34 Cursor Module A.3.35 Hyperlinking Module A.3.36 View Module A.3.37 Scripting Module A.3.38 Animation Module A.3.39 Font Module A.3.40 Basic Font Module A.3.41 Extensibility Module A.4 SVG 1.1 Document Type Definition A.4.1 SVG 1.1 DTD Driver A.4.2 SVG 1.1 Document Model A.4.3 SVG 1.1 Attribute Collection Appendix B: SVG Document Object Model (DOM) B.1 SVG DOM overview B.1.1 SVG DOM object initialization B.2 Elements in the SVG DOM B.3 Naming conventions B.4 Exception SVGException B.5 Feature strings for the hasFeature method call B.6 Relationship with DOM Level 2 Events B.7 Relationship with DOM Level 2 CSS B.7.1 Introduction B.7.2 User agents that do not support styling with CSS B.7.3 User agents that support styling with CSS B.7.4 Extended interfaces B.8 Read only nodes in the DOM B.9 Invalid values Appendix C: IDL Definitions Appendix D: Java Language Binding D.1 The Java language binding D.2 Using SVG with the Java language Appendix E: ECMAScript Language Binding E.1 Exceptions E.2 Constants E.3 Types E.4 Objects Appendix F: Implementation Requirements F.1 Introduction F.2 Error processing F.3 Version control F.4 Clamping values which are restricted to a particular range F.5 憄ath?element implementation notes F.6 Elliptical arc implementation notes F.6.1 Elliptical arc syntax F.6.2 Out-of-range parameters F.6.3 Parameterization alternatives F.6.4 Conversion from center to endpoint parameterization F.6.5 Conversion from endpoint to center parameterization F.6.6 Correction of out-of-range radii F.7 Text selection implementation notes F.8 Printing implementation notes Appendix G: Conformance Criteria G.1 Introduction G.2 Conforming SVG Document Fragments G.3 Conforming SVG Stand-Alone Files G.4 Conforming SVG Generators G.5 Conforming SVG Servers G.6 Conforming SVG DOM Subtree G.7 Conforming SVG Interpreters G.8 Conforming SVG Viewers Appendix H: Accessibility Support H.1 WAI Accessibility Guidelines H.2 SVG Content Accessibility Guidelines Appendix I: Internationalization Support I.1 Introduction I.2 Internationalization and SVG I.3 SVG Internationalization Guidelines Appendix J: Minimizing SVG File Sizes Appendix K: References K.1 Normative references K.2 Informative references Appendix L: Element Index Appendix M: Attribute Index M.1 Regular attributes M.2 Presentation attributes Appendix N: Property Index Appendix O: Feature Strings O.1 Introduction O.2 SVG 1.1 feature strings O.3 SVG 1.0 feature strings Appendix P: Media Type Registration for image/svg+xml P.1 Introduction P.2 Registration of media type image/svg+xml Appendix Q: Changes Check Update

©
This document uses PHP Chinese website manual Release

characters

SVG 1.1 (Second Edition) – 16 August 2011Top ⋅ Contents ⋅ Previous ⋅ Next ⋅ Elements ⋅ Attributes ⋅ Properties

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 Styling with XSL
  • 6.6 Styling with CSS
  • 6.7 Case sensitivity of property names and values
  • 6.8 Facilities from CSS and XSL used by SVG
  • 6.9 Referencing external style sheets
  • 6.10 The ‘style’ element
  • 6.11 The ‘class’ attribute
  • 6.12 The ‘style’ attribute
  • 6.13 Specifying the default style sheet language
  • 6.14 Property inheritance
  • 6.15 The scope/range of styles
  • 6.16 User agent style sheet
  • 6.17 Aural style sheets
  • 6.18 DOM interfaces
    • 6.18.1 Interface SVGStyleElement

6.1 SVG's styling properties

SVG uses styling properties to describe many of its document parameters. Styling properties define how the graphics elements in the SVG content 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.
  • Parameters having to do with text styling such as font family and size.
  • Parameters which impact the way that graphical elements are rendered, such as specifying clipping paths, masks, arrowheads, markers and filter effects.

SVG shares many of its styling properties with CSS [CSS2] and XSL [XSL]. Except for any additional SVG-specific rules explicitly mentioned in this specification, the normative definition of properties that are shared with CSS and XSL is the definition of the property from the CSS2 specification [CSS2].

The following properties are shared between CSS2 and SVG. 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’, only applicable to outermost svg element.
    • ‘color’, used to provide a potential indirect value (currentColor) for the ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’ and ‘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. See Color profile descriptions.)
    • ‘cursor’
    • ‘display’
    • ‘overflow’, only applicable to elements which establish a new viewport.
    • ‘visibility’

The following SVG properties are not defined in CSS2. The complete normative definitions 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 the Property Index.

6.2 Usage scenarios for styling

SVG has many usage scenarios, each with different needs. Here are three common usage scenarios:

  1. SVG content used as an exchange format (style sheet language-independent):

    In some usage scenarios, reliable interoperability of SVG content across software tools is the main goal. Since support for a particular style sheet language is not guaranteed across all implementations, it is a requirement that SVG content can be fully specified without the use of a style sheet language.

  2. SVG content generated as the output from XSLT:

    XSLT offers the ability to take a stream of arbitrary XML content as input, apply potentially complex transformations, and then generate SVG content as output [XSLT]. XSLT can be used to transform XML data extracted from databases into an SVG graphical representation of that data. It is a requirement that fully specified SVG content can be generated from XSLT.

  3. SVG content styled with CSS:

    CSS is a widely implemented declarative language for assigning styling properties to XML content, including SVG [CSS2]. It represents a combination of features, simplicity and compactness that makes it very suitable for many applications of SVG. It is a requirement that CSS styling can be applied to SVG content.

6.3 Alternative ways to specify styling properties

Styling properties can be assigned to SVG elements in the following two ways:

  • Presentation attributes

    Styling properties can be assigned using SVG's presentation attributes. For each styling property defined in this specification, there is a corresponding XML presentation attribute available on all relevant SVG elements. Detailed information on the presentation attributes can be found in Specifying properties using the presentation attributes.

    The presentation attributes are style sheet language independent and thus are applicable to usage scenario 1 above (i.e., tool interoperability). Because it is straightforward to assign values to XML attributes from XSLT, the presentation attributes are well-suited to usage scenario 2 above (i.e., SVG generation from XSLT). (See Styling with XSL below.)

    Conforming SVG Interpreters and Conforming SVG Viewers are required to support SVG's presentation attributes.

  • CSS Stylesheets

    To support usage scenario 3 above, SVG content can be styled with CSS. For more information, see Styling with CSS.

    Conforming SVG Interpreters and Conforming SVG Viewers that support CSS styling of generic (i.e., text-based) XML content are required to also support CSS styling of SVG content.

6.4 Specifying properties using the presentation attributes

For each styling property defined in this specification (see Property Index), there is a 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 the interior of a shape. There is a corresponding presentation attribute with the same name (i.e., ‘fill’) that can be used to specify a value for the ‘fill’ property on a given element.

The following example shows how the ‘fill’ and ‘stroke’ properties can be specified on a ‘rect’ using the ‘fill’ and ‘stroke’ presentation attributes. The rectangle will be filled with red and outlined with blue:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
  <rect x="200" y="100" width="600" height="300" 
        fill="red" stroke="blue" stroke-width="3"/>
</svg>

View this example as SVG (SVG-enabled browsers only)

The presentation attributes offer the following advantages:

  • 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.
  • Restyling. SVG content that uses the presentation attributes is highly compatible with downstream processing using XSLT [XSLT] [XSLT2] or supplemental styling by adding CSS style rules to override some of the presentation attributes.
  • Convenient generation using 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.

In some situations, SVG content that uses the presentation attributes has potential limitations versus SVG content that is styled with a style sheet language such as CSS (see Styling with CSS). In other situations, such as when an XSLT style sheet generates SVG content from semantically rich XML source files, the limitations below may not apply. Depending on the situation, some of the following potential limitations may 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.
  • 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.
  • 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.
  • 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.

For user agents that support CSS, the presentation attributes must be translated to corresponding CSS style rules according to rules described in Precedence of non-CSS presentational hints ([CSS2], section 6.4.4), with the additional clarification that the presentation attributes are conceptually inserted into a new author style sheet which is the first in the author style sheet collection. The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or ‘style’ attributes.

User agents that do not support CSS must ignore any CSS style rules defined in CSS style sheets and ‘style’ attributes. In this case, the CSS cascade does not apply. (Inheritance of properties, however, does apply. See Property inheritance.)

An !important declaration ([CSS2], section 6.4.2) within a presentation attribute definition is an invalid value.

Animation of presentation attributes is equivalent to animating the corresponding property. Thus, the same effect occurs from animating the presentation attribute with attributeType="XML" as occurs with animating the corresponding property with attributeType="CSS" (see ‘attributeType’).

6.5 Styling with XSL

XSL style sheets [XSLT] [XSLT2] define how to transform XML content into something else, usually other XML. When XSLT is used in conjunction with SVG, sometimes SVG content will serve as both input and output for XSL style sheets. Other times, XSL style sheets will take non-SVG content as input and generate SVG content as output.

The following example uses an external XSL style sheet to transform SVG content into modified SVG content (see Referencing external style sheets). The style sheet sets the ‘fill’ and ‘stroke’ properties on all rectangles to red and blue, respectively:

mystyle.xsl
<?xml version="1.0" standalone="no"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:svg="http://www.w3.org/2000/svg">
  <xsl:output
    method="xml"
    encoding="utf-8"
    doctype-public="-//W3C//DTD SVG 1.1//EN"
    doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"/>
  <!-- Add version to topmost 'svg' element -->
  <xsl:template match="/svg:svg">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:attribute name="version">1.1</xsl:attribute>
      <xsl:apply-templates/>
    </xsl:copy>
  </xsl:template>
  <!-- Add styling to all 'rect' elements -->
  <xsl:template match="svg: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>
</xsl:stylesheet>

SVG file to be transformed by mystyle.xsl
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.xsl" type="application/xml"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="10cm" height="5cm">
  <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 1.1//EN" 
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     width="10cm" height="5cm" version="1.1">
  <rect x="2cm" y="1cm" width="6cm" height="3cm" fill="red" stroke="blue" stroke-width="3"/>
</svg>

6.6 Styling with CSS

SVG implementations that support CSS are required to support the following:

  • External CSS style sheets referenced from the current document (see Referencing external style sheets)
  • Internal CSS style sheets (i.e., style sheets embedded within the current document, such as within an SVG ‘style’ element)
  • Inline style (i.e., CSS property declarations within a ‘style’ attribute on a particular SVG element)

The following example shows the use of an external CSS style sheet to set the ‘fill’ and ‘stroke’ properties on all rectangles to red and blue, 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 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
  <rect x="200" y="100" width="600" height="300"/>
</svg>

View this example as SVG (SVG-enabled browsers only)
 

CSS style sheets can be embedded within SVG content inside of a ‘style’ element. The following example uses an internal CSS style sheet to achieve the same result as the previous example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
  <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>

View this example as SVG (SVG-enabled browsers only)

Note how the CSS style sheet is placed within a CDATA construct (i.e., <![CDATA[ ... ]]>). Placing internal CSS style sheets within CDATA blocks is sometimes necessary since CSS style sheets can include characters, such as ">", which conflict with XML parsers. Even if a given style sheet does not use characters that conflict with XML parsing, it is highly recommended that internal style sheets be placed inside CDATA blocks.

Implementations that support CSS are also required to support CSS inline style. Similar to the ‘style’ attribute in HTML, CSS inline style can be declared within a ‘style’ attribute in SVG by specifying a semicolon-separated list of property declarations, where each property declaration has the form "name: value". Note that property declarations inside the ‘style’ attribute must follow CSS style rules, see The 'style' attribute.

The following example shows how the ‘fill’ and ‘stroke’ properties can be specified on a ‘rect’ using the ‘style’ attribute. Just like the previous example, the rectangle will be filled with red and outlined with blue:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
  <rect x="200" y="100" width="600" height="300" 
        style="fill: red; stroke: blue; stroke-width: 3"/>
</svg>

View this example as SVG (SVG-enabled browsers only)

In an SVG user agent that supports CSS style sheets, the following facilities from CSS2 must be supported:

  • CSS2 selectors within style sheets ([CSS2], chapter 5). Because SVG is intended to be used as one component in a multiple namespace XML application and CSS2 is not namespace aware, type selectors will only match against the local part of the element's qualified name.
  • External CSS style sheets [XML-SS], CSS style sheets within ‘style’ elements and CSS declaration blocks ([CSS2], section 4.1.7) within ‘style’ attributes attached to specific SVG elements.
  • CSS2 rules for assigning property values, cascading and inheritance ([CSS2], chapter 6).
  • @font-face, @media, @import and @charset rules within style sheets ([CSS2], sections 15.3.1, 7.2.1, 6.3 and 4.4).
  • CSS2's dynamic pseudo-classes :hover, :active and :focus and pseudo-classes :first-child, :visited, :link and :lang ([CSS2], section 5.11). The remaining CSS2 pseudo-classes, including those having to do with generated content ([CSS2], chapter 12), are not part of the SVG language definition. An SVG element gains focus when it is selected. See Text selection.
  • 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 ([CSS2], chapter 19). (See Aural style sheets.)
  • 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 section ([XML10], section 2.7).

SVG defines an @color-profile at-rule ([CSS2], section 4.1.6) for defining color profiles so that ICC color profiles can be applied to CSS-styled SVG content.

Note the following about relative URIs and external CSS style sheets: The CSS2 specification says ([CSS2], section 4.3.4) that relative URIs (as defined in Uniform Resource Identifiers (URI): Generic Syntax [RFC3986]) within style sheets are resolved such that the base URI is that of the style sheet, not that of the referencing document.

6.7 Case sensitivity of property names and values

Property declarations via presentation attributes are expressed in XML [XML10], which is case-sensitive. CSS property declarations specified either in CSS style sheets or in a ‘style’ attribute, on the other hand, are generally case-insensitive with some exceptions ([CSS2], section 4.1.3).

Because presentation attributes are expressed as XML attributes, presentation attributes are case-sensitive and must match the exact name as specified in the DTD (see the SVG.Presentation.attrib entity in the DTD, which expands to all of the presentation attributes). When using a presentation attribute to specify a value for the ‘fill’ property, the presentation attribute must be be specified as fill="…" and not fill="…" or Fill="…". Keyword values, such as italic in font-style="italic", are also case-sensitive and must be specified using the exact case used in the specification which defines the given keyword. For example, the keyword sRGB must have lowercase "s" and uppercase "RGB".

Property declarations within CSS style sheets or in a ‘style’ attribute must only conform to CSS rules, which are generally more lenient with regard to case sensitivity. However, to promote consistency across the different ways for expressing styling properties, it is strongly recommended that authors use the exact property names (usually, lowercase letters and hyphens) as defined in the relevant specification and express all keywords using the same case as is required by presentation attributes and not take advantage of CSS's ability to ignore case.

6.8 Facilities from CSS and XSL used by SVG

SVG shares various relevant properties and approaches common to CSS and XSL, plus the semantics of many of the processing rules.

SVG shares the following facilities with CSS and XSL:

  • Shared properties. Many of SVG's properties are shared between CSS2, XSL and SVG. (See list of shared properties).
  • Syntax rules. (The normative references are CSS2 syntax and basic data types and The grammar of CSS2; in [CSS2], chapter 4 and appendix D.)
  • Allowable data types. (The normative reference is CSS2 syntax and basic data types ([CSS2], chapter 4), with the exception that SVG length and angle values without a unit identifier. See Units.)
  • Inheritance rules.
  • 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; in [CSS2], section 18.2.)
  • For implementations that support CSS styling of SVG content, then that styling must be compatible with various other rules in CSS. (See Styling with CSS.)

6.9 Referencing external style sheets

External style sheets are referenced using the mechanism documented in Associating Style Sheets with XML documents Version 1.0 [XML-SS].

6.10 The ‘style’ element

The ‘style’ element allows style sheets to be embedded directly within SVG content. SVG's ‘style’ element has the same attributes as the corresponding element in HTML (see HTML's ‘style’ element).

‘style’
Categories:
None
Content model:
Any elements or character data.
Attributes:
  • core attributes — ‘id’, ‘xml:base’, ‘xml:lang’, ‘xml:space’
  • ‘type’
  • ‘media’
  • ‘title’
DOM Interfaces:
  • SVGStyleElement

Attribute definitions:

type = content-type
This attribute specifies the style sheet language of the element's contents. The style sheet language is specified as a content type (e.g., "text/css"), as per MIME Part Two: Media Types [RFC2046]. If a ‘type’ is not provided, the value of ‘contentStyleType’ on the ‘svg’ element shall be used, which in turn defaults to "text/css" [RFC2046]. If a ‘style’ element falls outside of the outermost svg element and the ‘type’ is not provided, the ‘type’ must default to "text/css" [RFC2046].
Animatable: no.
media = media-descriptors
This attribute specifies the intended destination medium for style information. It may be a single media descriptor or a comma-separated list. The default value for this attribute is "all". The set of recognized media-descriptors are the list of media types recognized by CSS2 ([CSS2], section 7.3).
Animatable: no.
title = advisory-title
(For compatibility with HTML 4 [HTML4].) This attribute specifies an advisory title for the ‘style’ element.
Animatable: no.

The syntax of style data depends on the style sheet language.

Some style sheet languages might allow a wider variety of rules in the ‘style’ element than in the ‘style’. For example, with CSS, rules can be declared within a ‘style’ element that cannot be declared within a ‘style’ attribute.

An example showing the ‘style’ element is provided above (see example).

6.11 The ‘class’ attribute

Attribute definitions:

class = list
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
Animatable: yes.

The ‘class’ attribute assigns one or more class names to an element. The element may be said to belong to these classes. A class name may be shared by several element instances. 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.

In the following example, the ‘text’ element is used in conjunction with the ‘class’ attribute to markup document messages. Messages appear 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>

In an SVG user agent that supports CSS styling, the following CSS style rules would tell visual user agents to display informational messages in green, warning messages in yellow, and error messages in red:

text.info    { color: green }
text.warning { color: yellow }
text.error   { color: red }

6.12 The ‘style’ attribute

The ‘style’ attribute allows per-element style rules to be specified directly on a given element. When CSS styling is used, CSS inline style is specified by including semicolon-separated property declarations of the form "name : value" within the ‘style’ attribute. Property declarations must follow CSS style rules thus CSS defined properties (e.g. 'font-size') when having a <length> value must include a unit (for non-zero values). See SVG's styling properties for a list of CSS defined properties.

Attribute definitions:

style = style
This attribute specifies style information for the current element. The style attribute specifies style information for a single element. The style sheet language of inline style rules is given by the value of attribute ‘contentStyleType’ on the ‘svg’ element. The syntax of style data depends on the style sheet language.
Animatable: no.

The style attribute 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. For optimal flexibility, authors should define styles in external style sheets.

An example showing the ‘style’ attribute is provided above (see example).

6.13 Specifying the default style sheet language

The ‘contentStyleType’ attribute on the ‘svg’ element specifies the default style sheet language for the given document fragment.

contentStyleType = "content-type"
Identifies the default style sheet language for the given document. That language must then be used for all instances of style that do not specify their own style sheet language, such as the ‘style’ attributes that are available on many elements. The value content-type specifies a media type, per MIME Part Two: Media Types [RFC2046]. The default value is "text/css" [RFC2318].
Animatable: no.

Since the only widely deployed language used for inline styling (in style elements and style attributes) is CSS, and since that is already the default language if contentStyleType is omitted, in practice contentStyleType is not well supported in user agents. XSL style sheets are typically external. If a new style sheet language becomes popular, it might not use style attributes and could easily declare which language is in use with the type attribute on the style element.

The use of contentStyleType is therefore deprecated; new content should not use it. Future versions of the SVG specification may remove contentStyleType.

6.14 Property inheritance

Whether or not the user agent supports CSS, property inheritance in SVG follows the property inheritance rules defined in the CSS2 specification. The normative definition for property inheritance is the Inheritance section of the CSS2 specification ([CSS2], section 6.2).

The definition of each property indicates whether the property can inherit the value of its parent.

In SVG, as in CSS2, most elements inherit computed values ([CSS2], section 6.1.2). For cases where something other than computed values are inherited, the property definition will describe the inheritance rules. For specified values ([CSS2], section 6.1.1) which are expressed in user units, in pixels (e.g., 20px) or in absolute values, the computed value equals the specified value. For specified values which use certain relative units (i.e., em, ex and percentages), the computed value will have the same units as the value to which 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 referenced value 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 to the current viewport or an object bounding box, then the computed value will be in user units.

Note that SVG has some facilities wherein a property which is specified on an ancestor element might effect its descendant element, even if the descendant element has a different assigned value for that property. For example, if a ‘clip-path’ property is specified on an ancestor element, and the current element has a ‘clip-path’ of none, the ancestor's clipping path still applies to the current element because the semantics of SVG state that the clipping path used on a given element is the intersection of all clipping paths specified on itself and all ancestor elements. The key concept is that property assignment (with possible property inheritance) happens first. After properties values have been assigned to the various elements, then the user agent applies the semantics of each assigned property, which might result in the property assignment of an ancestor element affecting the rendering of its descendants.

6.15 The scope/range of styles

The following define the scope/range of style sheets:

Stand-alone SVG document
There is one parse tree. Style sheets defined anywhere within the SVG document (in style elements or style attributes, or in external style sheets linked with the style sheet processing instruction) apply across the entire SVG document.
Stand-alone SVG document embedded in an HTML or XML document with the ‘img’, ‘object’ (HTML) or ‘image’ (SVG) elements
There are two completely separate parse trees; one for the referencing document (perhaps HTML or XHTML), and one for the SVG document. Style sheets defined anywhere within the referencing document (in style elements or style attributes, or in external style sheets linked with the style sheet processing instruction) apply across the entire referencing document but have no effect on the referenced SVG document. Style sheets defined anywhere within the referenced SVG document (in style elements or style attributes, or in external style sheets linked with the style sheet processing instruction) apply across the entire SVG document, but do not affect the referencing document (perhaps HTML or XHTML). To get the same styling across both the [X]HTML document and the SVG document, link them both to the same style sheet.
Stand-alone SVG content textually included in an XML document
There is a single parse tree, using multiple namespaces; one or more subtrees are in the SVG namespace. Style sheets defined anywhere within the XML document (in style elements or style attributes, or in external style sheets linked with the style sheet processing instruction) apply across the entire document, including those parts 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 contextual CSS selectors, or use XSL selectors.

6.16 User agent style sheet

The user agent shall maintain a user agent style sheet ([CSS2], section 6.4) for elements in the SVG namespace for visual media ([CSS2], section 7.3.1). The user agent style sheet below is expressed using CSS syntax; however, user agents are required to support the behavior that corresponds to this default style 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) }

The first line of the above user agent style sheet will cause the initial clipping path to be established at the bounds of the initial viewport. Furthermore, it will cause new clipping paths to be established at the bounds of the listed elements, all of which are elements that establish a new viewport. (Refer to the description of SVG's use of the ‘overflow’ property for more information.)

The second line of the above user agent style sheet will cause the ‘width’ and ‘height’ attributes on the ‘svg’ element to be used as the default values for the 'width' and 'height' properties during layout ([CSS2], chapter 9).

6.17 Aural style sheets

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], chapter 19) can be applied as defined in CSS2.

Aural style properties can be applied to any SVG element that can contain character data content, including ‘desc’ ‘title’ ‘tspan’, ‘tref’, ‘altGlyph’ and ‘textPath’. On user agents that support aural style sheets, the following CSS2 properties can be applied:

Aural property Definition in [CSS2]
‘azimuth’ Section 19.7
‘cue’ Section 19.5
‘cue-after’ Section 19.5
‘cue-before’ Section 19.5
‘elevation’ Section 19.7
‘pause’ Section 19.4
‘pause-after’ Section 19.4
‘pause-before’ Section 19.4
‘pitch’ Section 19.8
‘pitch-range’ Section 19.8
‘play-during’ Section 19.6
‘richness’ Section 19.8
‘speak’ Section 19.3
‘speak-header’ Section 17.7.1
‘speak-numeral’ Section 19.9
‘speak-punctuation’ Section 19.9
‘speech-rate’ Section 19.8
‘stress’ Section 19.8
‘voice-family’ Section 19.8
‘volume’ Section 19.2

For user agents that support aural style sheets and also support DOM Level 2 Core [DOM2], the user agent is required to support the DOM interfaces defined in Document Object Model CSS ([DOM2STYLE], chapter 2) that correspond to aural properties. (See Relationship with DOM2 CSS object model.)

6.18 DOM interfaces

6.18.1 Interface SVGStyleElement

The SVGStyleElement interface corresponds to the ‘style’ element. 
interface SVGStyleElement : SVGElement,
                            SVGLangSpace {
  attribute DOMString type setraises(DOMException);
  attribute DOMString media setraises(DOMException);
  attribute DOMString title setraises(DOMException);
};
Attributes:
type (DOMString)
Corresponds to attribute ‘type’ on the given element.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
media (DOMString)
Corresponds to attribute ‘media’ on the given element.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
title (DOMString)
Corresponds to attribute ‘title’ on the given element.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
SVG 1.1 (Second Edition) – 16 August 2011Top ⋅ Contents ⋅ Previous ⋅ Next ⋅ Elements ⋅ Attributes ⋅ Properties
Previous article： Next article：