目录 搜索
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
文字

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

14 Clipping, Masking and Compositing

Contents

  • 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 ‘overflow’ and ‘clip’ properties
    • 14.3.4 Clip to viewport vs. clip to ‘viewBox’
    • 14.3.5 Establishing a new clipping path: the ‘clipPath’ element
    • 14.3.6 Clipping paths, geometry, and pointer events
  • 14.4 Masking
  • 14.5 Object and group opacity: the ‘opacity’ property
  • 14.6 DOM interfaces
    • 14.6.1 Interface SVGClipPathElement
    • 14.6.2 Interface SVGMaskElement

14.1 Introduction

SVG supports the following clipping/masking features:

  • clipping paths, which uses any combination of ‘path’, ‘text’ and basic shapes to serve as the outline of a (in the absence of anti-aliasing) 1-bit mask, where everything on the "inside" of the outline is allowed to show through but everything on the outside is masked out
  • masks, which are container elements which can contain graphics elements or other container elements which define a set of graphics that is to be used as a semi-transparent mask for compositing foreground objects into the current background.

One key distinction between a clipping path and a mask is that clipping paths are hard masks (i.e., the silhouette consists of either fully opaque pixels or fully transparent pixels, with the possible exception of anti-aliasing along the edge of the silhouette) whereas masks consist of an image where each pixel value indicates the degree of transparency vs. opacity. In a mask, each pixel value can range from fully transparent to fully opaque.

SVG supports only simple alpha blending compositing (see Simple Alpha Compositing).

14.2 Simple alpha compositing

Graphics elements are blended into the elements already rendered on the canvas using simple alpha compositing, in which the resulting color and opacity at any given pixel on the canvas is the result of the following formulas (all color values use premultiplied alpha):

Er, Eg, Eb    - Element color value
Ea            - Element alpha value
Cr, Cg, Cb    - Canvas color value (before blending)
Ca            - Canvas alpha value (before blending)
Cr', Cg', Cb' - Canvas color value (after blending)
Ca'           - Canvas alpha value (after blending)
Ca' = 1 - (1 - Ea) * (1 - Ca)
Cr' = (1 - Ea) * Cr + Er
Cg' = (1 - Ea) * Cg + Eg
Cb' = (1 - Ea) * Cb + Eb

The following rendering properties, which provide information about the color space in which to perform the compositing operations, apply to compositing operations:

  • ‘color-interpolation’
  • ‘color-rendering’

14.3 Clipping paths

14.3.1 Introduction

The clipping path restricts the region to which paint can be applied. Conceptually, any parts of the drawing that lie outside of the region bounded by the currently active clipping path are not drawn. A clipping path can be thought of as a mask wherein those pixels outside the clipping path are black with an alpha value of zero and those pixels inside the clipping path are white with an alpha value of one (with the possible exception of anti-aliasing along the edge of the silhouette).

14.3.2 The initial clipping path

When an ‘svg’ element is either the root element in the document or is embedded within a document whose layout is determined according to the layout rules of CSS or XSL, then the user agent must establish an initial clipping path for the SVG document fragment. The ‘overflow’ and ‘clip’ properties along with additional SVG user agent processing rules determine the initial clipping path which the user agent establishes for the SVG document fragment:

14.3.3 The ‘overflow’ and ‘clip’ properties

‘overflow’
Value:   visible | hidden | scroll | auto | inherit
Initial:   see prose
Applies to:   elements which establish a new viewport, ‘pattern’ elements and ‘marker’ elements
Inherited:   no
Percentages:   N/A
Media:   visual
Animatable:   yes

The ‘overflow’ property has the same parameter values and has the same meaning as defined in CSS2 ([CSS2], section 11.1.1); however, the following additional points apply:

  • The ‘overflow’ property applies to elements that establish new viewports (e.g., ‘svg’ elements), ‘pattern’ elements and ‘marker’ elements. For all other elements, the property has no effect (i.e., a clipping rectangle is not created).
  • For those elements to which the ‘overflow’ property can apply, if the ‘overflow’ property has the value hidden or scroll, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent to defining a ‘clipPath’ element whose content is a ‘rect’ element which defines the equivalent rectangle, and then specifying the <uri> of this ‘clipPath’ element on the ‘clip-path’ property for the given element.
  • If the ‘overflow’ property has a value other than hidden or scroll, the property has no effect (i.e., a clipping rectangle is not created).
  • Within SVG content, the value auto is equivalent to the value visible.
  • When an outermost svg element is embedded inline within a parent XML grammar which uses CSS layout ([CSS2], chapter 9) or XSL formatting [XSL], if the ‘overflow’ property has the value hidden or scroll, then the user agent will establish an initial clipping path equal to the bounds of the initial viewport; otherwise, the initial clipping path is set according to the clipping rules as defined in CSS2 ([CSS2], section 11.1.1).
  • When an outermost svg element is stand-alone or embedded inline within a parent XML grammar which does not use CSS layout or XSL formatting, the ‘overflow’ property on the outermost svg element is ignored for the purposes of visual rendering and the initial clipping path is set to the bounds of the initial viewport.
  • The initial value for ‘overflow’ as defined in [CSS2-overflow] is 'visible', and this applies also to the root ‘svg’ element; however, for child elements of an SVG document, SVG's user agent style sheet overrides this initial value and sets the ‘overflow’ property on elements that establish new viewports (e.g., ‘svg’ elements), ‘pattern’ elements and ‘marker’ elements to the value 'hidden'.

As a result of the above, the default behavior of SVG user agents is to establish a clipping path to the bounds of the initial viewport and to establish a new clipping path for each element which establishes a new viewport and each ‘pattern’ and ‘marker’ element.

For related information, see Clip to viewport vs. clip to ‘viewBox’ .

‘clip’
Value:   <shape> | auto | inherit
Initial:   auto
Applies to:   elements which establish a new viewport, ‘pattern’ elements and ‘marker’ elements
Inherited:   no
Percentages:   N/A
Media:   visual
Animatable:   yes

The ‘clip’ property has the same parameter values as defined in CSS2 ([CSS2], section 11.1.2). Unitless values, which indicate current user coordinates, are permitted on the coordinate values on the <shape>. The value of auto defines a clipping path along the bounds of the viewport created by the given element.

14.3.4 Clip to viewport vs. clip to ‘viewBox’

It is important to note that initial values for the ‘overflow’ and ‘clip’ properties and the user agent style sheet will result in an initial clipping path that is set to the bounds of the initial viewport. When attributes ‘viewBox’ and ‘preserveAspectRatio’ attributes are specified, it is sometime desirable that the clipping path be set to the bounds of the ‘viewBox’ instead of the viewport (or reference rectangle, in the case of ‘marker’ and ‘pattern’ elements), particularly when ‘preserveAspectRatio’ specifies uniform scaling and the aspect ratio of the ‘viewBox’ does not match the aspect ratio of the viewport.

To set the initial clipping path to the bounds of the ‘viewBox’, set the bounds of ‘clip’ property to the same rectangle as specified on the ‘viewBox’ attribute. (Note that the parameters do not match. ‘clip’ takes values <top>, <right>,<bottom> and <left>, whereas ‘viewBox’ takes values <min-x>, <min-y>, <width> and <height>.)

14.3.5 Establishing a new clipping path: the ‘clipPath’ element

A clipping path is defined with a ‘clipPath’ element. A clipping path is used/referenced using the ‘clip-path’ property.

A ‘clipPath’ element can contain ‘path’ elements, ‘text’ elements, basic shapes (such as ‘circle’) or a ‘use’ element. If a ‘use’ element is a child of a ‘clipPath’ element, it must directly reference ‘path’, ‘text’ or basic shape elements. Indirect references are an error (see Error processing).

The raw geometry of each child element exclusive of rendering properties such as ‘fill’, ‘stroke’, ‘stroke-width’ within a ‘clipPath’ conceptually defines a 1-bit mask (with the possible exception of anti-aliasing along the edge of the geometry) which represents the silhouette of the graphics associated with that element. Anything outside the outline of the object is masked out. If a child element is made invisible by ‘display’ or ‘visibility’ it does not contribute to the clipping path. When the ‘clipPath’ element contains multiple child elements, the silhouettes of the child elements are logically OR'd together to create a single silhouette which is then used to restrict the region onto which paint can be applied. Thus, a point is inside the clipping path if it is inside any of the children of the ‘clipPath’.

For a given graphics element, the actual clipping path used will be the intersection of the clipping path specified by its ‘clip-path’ property (if any) with any clipping paths on its ancestors, as specified by the ‘clip-path’ property on the ancestor elements, or by the ‘overflow’ property on ancestor elements which establish a new viewport. Also, see the discussion of the initial clipping path.)

A couple of notes:

  • The ‘clipPath’ element itself and its child elements do not inherit clipping paths from the ancestors of the ‘clipPath’ element.
  • The ‘clipPath’ element or any of its children can specify property ‘clip-path’.
    If a valid ‘clip-path’ reference is placed on a ‘clipPath’ element, the resulting clipping path is the intersection of the contents of the ‘clipPath’ element with the referenced clipping path.
    If a valid ‘clip-path’ reference is placed on one of the children of a ‘clipPath’ element, then the given child element is clipped by the referenced clipping path before OR'ing the silhouette of the child element with the silhouettes of the other child elements.
  • An empty clipping path will completely clip away the element that had the ‘clip-path’ property applied.
‘clipPath’
Categories:
None
Content model:
Any number of the following elements, in any order:
  • descriptive elements‘desc’, ‘metadata’, ‘title’
  • animation elements‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘set’
  • shape elements‘circle’, ‘ellipse’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’
  • ‘text’
  • ‘use’
Attributes:
  • conditional processing attributes‘requiredFeatures’, ‘requiredExtensions’, ‘systemLanguage’
  • core attributes‘id’, ‘xml:base’, ‘xml:lang’, ‘xml:space’
  • presentation attributes‘alignment-baseline’, ‘baseline-shift’, ‘clip’, ‘clip-path’, ‘clip-rule’, ‘color’, ‘color-interpolation’, ‘color-interpolation-filters’, ‘color-profile’, ‘color-rendering’, ‘cursor’, ‘direction’, ‘display’, ‘dominant-baseline’, ‘enable-background’, ‘fill’, ‘fill-opacity’, ‘fill-rule’, ‘filter’, ‘flood-color’, ‘flood-opacity’, ‘font-family’, ‘font-size’, ‘font-size-adjust’, ‘font-stretch’, ‘font-style’, ‘font-variant’, ‘font-weight’, ‘glyph-orientation-horizontal’, ‘glyph-orientation-vertical’, ‘image-rendering’, ‘kerning’, ‘letter-spacing’, ‘lighting-color’, ‘marker-end’, ‘marker-mid’, ‘marker-start’, ‘mask’, ‘opacity’, ‘overflow’, ‘pointer-events’, ‘shape-rendering’, ‘stop-color’, ‘stop-opacity’, ‘stroke’, ‘stroke-dasharray’, ‘stroke-dashoffset’, ‘stroke-linecap’, ‘stroke-linejoin’, ‘stroke-miterlimit’, ‘stroke-opacity’, ‘stroke-width’, ‘text-anchor’, ‘text-decoration’, ‘text-rendering’, ‘unicode-bidi’, ‘visibility’, ‘word-spacing’, ‘writing-mode’
  • ‘class’
  • ‘style’
  • ‘externalResourcesRequired’
  • ‘transform’
  • ‘clipPathUnits’
DOM Interfaces:
  • SVGClipPathElement

Attribute definitions:

clipPathUnits = "userSpaceOnUse | objectBoundingBox"
Defines the coordinate system for the contents of the ‘clipPath’.
If clipPathUnits="userSpaceOnUse", the contents of the ‘clipPath’ represent values in the current user coordinate system in place at the time when the ‘clipPath’ element is referenced (i.e., the user coordinate system for the element referencing the ‘clipPath’ element via the ‘clip-path’ property).
If clipPathUnits="objectBoundingBox", then the user coordinate system for the contents of the ‘clipPath’ element is established using the bounding box of the element to which the clipping path is applied (see Object bounding box units).
If attribute ‘clipPathUnits’ is not specified, then the effect is as if a value of 'userSpaceOnUse' were specified.
Animatable: yes.

Properties inherit into the ‘clipPath’ element from its ancestors; properties do not inherit from the element referencing the ‘clipPath’ element.

‘clipPath’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘clip-path’ property. The ‘display’ property does not apply to the ‘clipPath’ element; thus, ‘clipPath’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘clipPath’ elements are available for referencing even when the ‘display’ property on the ‘clipPath’ element or any of its ancestors is set to none.

‘clip-path’
Value:   <funciri> | none | inherit
Initial:   none
Applies to:   container elements, graphics elements and ‘clipPath’
Inherited:   no
Percentages:   N/A
Media:   visual
Animatable:   yes
<funciri>
An IRI reference to another graphical object within the same SVG document fragment which will be used as the clipping path. If the IRI reference is not valid (e.g it points to an object that doesn't exist or the object is not a ‘clipPath’ element) the ‘clip-path’ property must be treated as if it hadn't been specified.
‘clip-rule’
Value:   nonzero | evenodd | inherit
Initial:   nonzero
Applies to:   graphics elements within a ‘clipPath’ element
Inherited:   yes
Percentages:   N/A
Media:   visual
Animatable:   yes
nonzero
See description of ‘fill-rule’ property.
evenodd
See description of ‘fill-rule’ property.

The ‘clip-rule’ property only applies to graphics elements that are contained within a ‘clipPath’ element. The following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because ‘clip-rule’ is specified on the ‘path’ element that defines the clipping shape:

<g clip-rule="nonzero">
  <clipPath id="MyClip">
    <path d="..." clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#MyClip)" ... />
</g>

whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the ‘clip-rule’ is specified on the referencing element, not on the object defining the clipping shape:

<g clip-rule="nonzero">
  <clipPath id="MyClip">
    <path d="..." />
  </clipPath>
  <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>

14.3.6 Clipping paths, geometry, and pointer events

A clipping path is conceptually equivalent to a custom viewport for the referencing element. Thus, it affects the rendering of an element, but not the element's inherent geometry. The bounding box of a clipped element (that is, an element which references a ‘clipPath’ element via a ‘clip-path’ property, or a child of the referencing element) must remain the same as if it were not clipped.

By default, pointer-events must not be dispatched on the clipped (non-visible) regions of a shape. For example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive 'click' events outside the smaller radius. Later versions of SVG may define new properties to enable fine-grained control over the interactions between hit testing and clipping.

14.4 Masking

In SVG, you can specify that any other graphics object or ‘g’ element can be used as an alpha mask for compositing the current object into the background.

A mask is defined with a ‘mask’ element. A mask is used/referenced using the ‘mask’ property.

A ‘mask’ can contain any graphical elements or container elements such as a ‘g’.

It is an error if the ‘mask’ property references a non-existent object or if the referenced object is not a ‘mask’ element (see Error Processing).

The effect is as if the child elements of the ‘mask’ are rendered into an offscreen image which has been initialized to transparent black. Any graphical object which uses/references the given ‘mask’ element will be painted onto the background through the mask, thus completely or partially masking out parts of the graphical object.

For any graphics object that is used as a mask, the mask value at any point is computed from the color channel values and alpha channel value as follows. First a luminance value is computed from the color channel values:

  • If the computed value of ‘color-interpolation’ on the ‘mask’ element is linearRGB, first convert the original image color values (potentially in the sRGB color space) to the linear RGB color space (see Rendering properties). Then, using non-premultiplied linear RGB color values, apply the luminance-to-alpha coefficients (as defined in the ‘feColorMatrix’ filter primitive) to convert the linear RGB color values to linear luminance values.
  • If the computed value of ‘color-interpolation’ on the ‘mask’ element is sRGB then the luminance value is calculated by taking the non-premultiplied RGB color values, applying the luminance-to-alpha coefficients (as defined in the ‘feColorMatrix’ filter primitive) to convert the RGB color values to luminance values.

Finally if the graphics object also includes an alpha channel, then the computed luminance value is multiplied by the corresponding alpha value to produce the mask value.

For a four-channel RGBA graphics object that is used as a mask, both the color channels and the alpha channel of the mask contribute to the masking operation. The alpha mask that is used to composite the current object into the background represents the product of the luminance of the color channels (see previous paragraph) and the alpha channel from the mask.

For a three-channel RGB graphics object that is used as a mask (e.g., when referencing a 3-channel image file), the effect is as if the object were converted into a 4-channel RGBA image with the alpha channel uniformly set to 1.

For a single-channel image that is used as a mask (e.g., when referencing a 1-channel grayscale image file), the effect is as if the object were converted into a 4-channel RGBA image, where the single channel from the referenced object is used to compute the three color channels and the alpha channel is uniformly set to 1. Note that when referencing a grayscale image file, the transfer curve relating the encoded grayscale values to linear light values must be taken into account when computing the color channels.

The effect of a mask is identical to what would have happened if there were no mask but instead the alpha channel of the given object were multiplied with the mask's resulting alpha values (i.e., the product of the mask's luminance from its color channels multiplied by the mask's alpha channel).

Note that SVG ‘path’s, shapes (e.g., ‘circle’) and ‘text’ are all treated as four-channel RGBA images for the purposes of masking operations.

Example mask01 uses an image to mask a rectangle.

<?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 width="8cm" height="3cm" viewBox="0 0 800 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example mask01 - blue text masked with gradient against red background
  </desc>
  <defs>
    <linearGradient id="Gradient" gradientUnits="userSpaceOnUse"
                    x1="0" y1="0" x2="800" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="Mask" maskUnits="userSpaceOnUse"
          x="0" y="0" width="800" height="300">
      <rect x="0" y="0" width="800" height="300" fill="url(#Gradient)"  />
    </mask>
    <text id="Text" x="400" y="200" 
          font-family="Verdana" font-size="100" text-anchor="middle" >
      Masked text
    </text>
  </defs>

  <!-- Draw a pale red rectangle in the background -->
  <rect x="0" y="0" width="800" height="300" fill="#FF8080" />
  
  <!-- Draw the text string twice. First, filled blue, with the mask applied.
       Second, outlined in black without the mask. -->
  <use xlink:href="#Text" fill="blue" mask="url(#Mask)" />
  <use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />
</svg>
Example mask01
Example mask01 — blue text masked with gradient against red background

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

‘mask’
Categories:
Container element
Content model:
Any number of the following elements, in any order:
  • animation elements‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘set’
  • descriptive elements‘desc’, ‘metadata’, ‘title’
  • shape elements‘circle’, ‘ellipse’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’
  • structural elements‘defs’, ‘g’, ‘svg’, ‘symbol’, ‘use’
  • gradient elements‘linearGradient’, ‘radialGradient’
  • ‘a’
  • ‘altGlyphDef’
  • ‘clipPath’
  • ‘color-profile’
  • ‘cursor’
  • ‘filter’
  • ‘font’
  • ‘font-face’
  • ‘foreignObject’
  • ‘image’
  • ‘marker’
  • ‘mask’
  • ‘pattern’
  • ‘script’
  • ‘style’
  • ‘switch’
  • ‘text’
  • ‘view’
Attributes:
  • conditional processing attributes‘requiredFeatures’, ‘requiredExtensions’, ‘systemLanguage’
  • core attributes‘id’, ‘xml:base’, ‘xml:lang’, ‘xml:space’
  • presentation attributes‘alignment-baseline’, ‘baseline-shift’, ‘clip’, ‘clip-path’, ‘clip-rule’, ‘color’, ‘color-interpolation’, ‘color-interpolation-filters’, ‘color-profile’, ‘color-rendering’, ‘cursor’, ‘direction’, ‘display’, ‘dominant-baseline’, ‘enable-background’, ‘fill’, ‘fill-opacity’, ‘fill-rule’, ‘filter’, ‘flood-color’, ‘flood-opacity’, ‘font-family’, ‘font-size’, ‘font-size-adjust’, ‘font-stretch’, ‘font-style’, ‘font-variant’, ‘font-weight’, ‘glyph-orientation-horizontal’, ‘glyph-orientation-vertical’, ‘image-rendering’, ‘kerning’, ‘letter-spacing’, ‘lighting-color’, ‘marker-end’, ‘marker-mid’, ‘marker-start’, ‘mask’, ‘opacity’, ‘overflow’, ‘pointer-events’, ‘shape-rendering’, ‘stop-color’, ‘stop-opacity’, ‘stroke’, ‘stroke-dasharray’, ‘stroke-dashoffset’, ‘stroke-linecap’, ‘stroke-linejoin’, ‘stroke-miterlimit’, ‘stroke-opacity’, ‘stroke-width’, ‘text-anchor’, ‘text-decoration’, ‘text-rendering’, ‘unicode-bidi’, ‘visibility’, ‘word-spacing’, ‘writing-mode’
  • ‘class’
  • ‘style’
  • ‘externalResourcesRequired’
  • ‘x’
  • ‘y’
  • ‘width’
  • ‘height’
  • ‘maskUnits’
  • ‘maskContentUnits’
DOM Interfaces:
  • SVGMaskElement

Attribute definitions:

maskUnits = "userSpaceOnUse | objectBoundingBox"
Defines the coordinate system for attributes ‘x’, ‘y’, ‘width’ and ‘height’.
If maskUnits="userSpaceOnUse", ‘x’, ‘y’, ‘width’ and ‘height’ represent values in the current user coordinate system in place at the time when the ‘mask’ element is referenced (i.e., the user coordinate system for the element referencing the ‘mask’ element via the ‘mask’ property).
If maskUnits="objectBoundingBox", ‘x’, ‘y’, ‘width’ and ‘height’ represent fractions or percentages of the bounding box of the element to which the mask is applied. (See Object bounding box units.)
If attribute ‘maskUnits’ is not specified, then the effect is as if a value of 'objectBoundingBox' were specified.
Animatable: yes.
maskContentUnits = "userSpaceOnUse | objectBoundingBox"
Defines the coordinate system for the contents of the ‘mask’.
If maskContentUnits="userSpaceOnUse", the user coordinate system for the contents of the ‘mask’ element is the current user coordinate system in place at the time when the ‘mask’ element is referenced (i.e., the user coordinate system for the element referencing the ‘mask’ element via the ‘mask’ property).
If maskContentUnits="objectBoundingBox", the user coordinate system for the contents of the ‘mask’ is established using the bounding box of the element to which the mask is applied. (See Object bounding box units.)
If attribute ‘maskContentUnits’ is not specified, then the effect is as if a value of 'userSpaceOnUse' were specified.
Animatable: yes.
x = "<coordinate>"
The x-axis coordinate of one corner of the rectangle for the largest possible offscreen buffer. Note that the clipping path used to render any graphics within the mask will consist of the intersection of the current clipping path associated with the given object and the rectangle defined by ‘x’, ‘y’, ‘width’ and ‘height’.
If the attribute is not specified, the effect is as if a value of '-10%' were specified.
Animatable: yes.
y = "<coordinate>"
The y-axis coordinate of one corner of the rectangle for the largest possible offscreen buffer.
If the attribute is not specified, the effect is as if a value of '-10%' were specified.
Animatable: yes.
width = "<length>"
The width of the largest possible offscreen buffer. Note that the clipping path used to render any graphics within the mask will consist of the intersection of the current clipping path associated with the given object and the rectangle defined by ‘x’, ‘y’, ‘width’ and ‘height’.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of '120%' were specified.
Animatable: yes.
height = "<length>"
The height of the largest possible offscreen buffer.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of '120%' were specified.
Animatable: yes.

Properties inherit into the ‘mask’ element from its ancestors; properties do not inherit from the element referencing the ‘mask’ element.

‘mask’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘mask’ property. The ‘opacity’, ‘filter’ and ‘display’ properties do not apply to the ‘mask’ element; thus, ‘mask’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘mask’ elements are available for referencing even when the ‘display’ property on the ‘mask’ element or any of its ancestors is set to none.

The following is a description of the ‘mask’ property.

‘mask’
Value:   <funciri> | none | inherit
Initial:   none
Applies to:   container elements and graphics elements
Inherited:   no
Percentages:   N/A
Media:   visual
Animatable:   yes
<funciri>
A IRI reference to another graphical object which will be used as the mask.

14.5 Object and group opacity: the ‘opacity’ property

There are several opacity properties within SVG:

  • ‘fill-opacity’, which specifies the opacity of a fill operation;
  • ‘stroke-opacity’, which specifies the opacity of a stroking operation;
  • ‘stop-opacity’, which specifies the opacity of a gradient stop; and
  • ‘opacity’, which specifies object/group opacity and which is described in this section.

Except for object/group opacity (described just below), all other opacity properties are involved in intermediate rendering operations. Object/group opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the object/group is rendered into an RGBA offscreen image, the object/group opacity setting specifies how to blend the offscreen image into the current background.

‘opacity’
Value:   <opacity-value> | inherit
Initial:   1
Applies to:   container elements (except ‘mask’) and graphics elements
Inherited:   no
Percentages:   N/A
Media:   visual
Animatable:   yes
<opacity-value>
The uniform opacity setting to be applied across an entire object, as a <number>. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. (See Clamping values which are restricted to a particular range.) If the object is a container element such as a ‘g’, then the effect is as if the contents of the ‘g’ were blended against the current background using a mask where the value of each pixel of the mask is <opacity-value>. (See Simple alpha compositing.)

Example opacity01 illustrates various usage of the ‘opacity’ property on elements and groups.

<?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 width="12cm" height="3.5cm" viewBox="0 0 1200 350"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example opacity01 - opacity property</desc>

  <rect x="1" y="1" width="1198" height="348"
        fill="none" stroke="blue" />

  <!-- Background blue rectangle -->
  <rect x="100" y="100" width="1000" height="150" fill="#0000ff"  />

  <!-- Red circles going from opaque to nearly transparent -->
  <circle cx="200" cy="100" r="50" fill="red" opacity="1"  />
  <circle cx="400" cy="100" r="50" fill="red" opacity=".8"  />
  <circle cx="600" cy="100" r="50" fill="red" opacity=".6"  />
  <circle cx="800" cy="100" r="50" fill="red" opacity=".4"  />
  <circle cx="1000" cy="100" r="50" fill="red" opacity=".2"  />

  <!-- Opaque group, opaque circles -->
  <g opacity="1" >
    <circle cx="182.5" cy="250" r="50" fill="red" opacity="1"  />
    <circle cx="217.5" cy="250" r="50" fill="green" opacity="1"  />
  </g>
  <!-- Group opacity: .5, opacity circles -->
  <g opacity=".5" >
    <circle cx="382.5" cy="250" r="50" fill="red" opacity="1"  />
    <circle cx="417.5" cy="250" r="50" fill="green" opacity="1"  />
  </g>
  <!-- Opaque group, semi-transparent green over red -->
  <g opacity="1" >
    <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"  />
    <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"  />
  </g>
  <!-- Opaque group, semi-transparent red over green -->
  <g opacity="1" >
    <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"  />
    <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"  />
  </g>
  <!-- Group opacity .5, semi-transparent green over red -->
  <g opacity=".5" >
    <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"  />
    <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"  />
  </g>
</svg>
Example opacity01
Example opacity01 — opacity property

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

In the example above, the top row of circles have differing opacities, ranging from 1.0 to 0.2. The bottom row illustrates five ‘g’ elements, each of which contains overlapping red and green circles, as follows:

  • The first group shows the opaque case for reference. The group has opacity of 1, as do the circles.
  • The second group shows group opacity when the elements in the group are opaque.
  • The third and fourth group show that opacity is not commutative. In the third group (which has opacity of 1), a semi-transparent green circle is drawn on top of a semi-transparent red circle, whereas in the fourth group a semi-transparent red circle is drawn on top of a semi-transparent green circle. Note that area where the two circles intersect display different colors. The third group shows more green color in the intersection area, whereas the fourth group shows more red color.
  • The fifth group shows the multiplicative effect of opacity settings. Both the circles and the group itself have opacity settings of .5. The result is that the portion of the red circle which does not overlap with the green circle (i.e., the top/right of the red circle) will blend into the blue rectangle with accumulative opacity of .25 (i.e., .5*.5), which, after blending into the blue rectangle, results in a blended color which is 25% red and 75% blue.

14.6 DOM interfaces

14.6.1 Interface SVGClipPathElement

The SVGClipPathElement interface corresponds to the ‘clipPath’ element.
interface SVGClipPathElement : SVGElement,
                               SVGTests,
                               SVGLangSpace,
                               SVGExternalResourcesRequired,
                               SVGStylable,
                               SVGTransformable,
                               SVGUnitTypes {
  readonly attribute SVGAnimatedEnumeration clipPathUnits;
};
Attributes:
clipPathUnits (readonly SVGAnimatedEnumeration)
Corresponds to attribute ‘clipPathUnits’ on the given ‘clipPath’ element. Takes one of the constants defined in SVGUnitTypes.

14.6.2 Interface SVGMaskElement

The SVGMaskElement interface corresponds to the ‘mask’ element.
interface SVGMaskElement : SVGElement,
                           SVGTests,
                           SVGLangSpace,
                           SVGExternalResourcesRequired,
                           SVGStylable,
                           SVGUnitTypes {
  readonly attribute SVGAnimatedEnumeration maskUnits;
  readonly attribute SVGAnimatedEnumeration maskContentUnits;
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
};
Attributes:
maskUnits (readonly SVGAnimatedEnumeration)
Corresponds to attribute ‘maskUnits’ on the given ‘mask’ element. Takes one of the constants defined in SVGUnitTypes.
maskContentUnits (readonly SVGAnimatedEnumeration)
Corresponds to attribute ‘maskContentUnits’ on the given ‘mask’ element. Takes one of the constants defined in SVGUnitTypes.
x (readonly SVGAnimatedLength)
Corresponds to attribute ‘x’ on the given ‘mask’ element.
y (readonly SVGAnimatedLength)
Corresponds to attribute ‘y’ on the given ‘mask’ element.
width (readonly SVGAnimatedLength)
Corresponds to attribute ‘width’ on the given ‘mask’ element.
height (readonly SVGAnimatedLength)
Corresponds to attribute ‘height’ on the given ‘mask’ element.
SVG 1.1 (Second Edition) – 16 August 2011Top ⋅ Contents ⋅ Previous ⋅ Next ⋅ Elements ⋅ Attributes ⋅ Properties
上一篇: 下一篇: