svg中文手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Verzeichnis suchen
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

©
Dieses Dokument verwendetPHP-Handbuch für chinesische WebsitesFreigeben

Figuren

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

16 Interactivity

Contents

  • 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‘pointer-events’property
  • 16.7 Magnification and panning
  • 16.8 Cursors
    • 16.8.1 Introduction to cursors
    • 16.8.2 The‘cursor’property
    • 16.8.3 The‘cursor’element
  • 16.9 DOM interfaces
    • 16.9.1 Interface SVGCursorElement

16.1 Introduction

SVG content can be interactive (i.e., responsive to user-initiated events) by utilizing the following features in the SVG language:

  • User-initiated actions such as button presses on the pointing device (e.g., a mouse) can cause animations or scripts to execute.
  • The user can initiate hyperlinks to new Web pages (see Links out of SVG content: the‘a’element) by actions such as mouse clicks when the pointing device is positioned over particular graphics elements.
  • In many cases, depending on the value of the‘zoomAndPan’attribute on the‘svg’element and on the characteristics of the user agent, users are able to zoom into and pan around SVG content.
  • User movements of the pointing device can cause changes to the cursor that shows the current position of the pointing device.

This chapter describes:

  • information about events, including under which circumstances events are triggered
  • how to indicate whether a given document can be zoomed and panned
  • how to specify which cursors to use

Related information can be found in other chapters:

  • hyperlinks are discussed in Links
  • scripting and event attributes are discussed in Scripting
  • SVG's relationship to DOM2 events is discussed in Relationship with DOM2 event model
  • animation is discussed in Animation

16.2 Complete list of supported events

The following aspects of SVG are affected by events:

  • Using SVG Document Object Model (DOM), a script can register DOM 2 event listeners ([DOM2EVENTS], section 1.3) so that script can be invoked when a given event occurs.
  • SVG includes event attributes on selected elements which define script that can be executed when a given event occurs in association with the given element.
  • SVG'sanimation elementscan be defined to begin or end based on events.

The following table lists all of the events which are recognized and supported in SVG. TheEvent namein the first column is the name to use within SVG'sanimation elementsto define the events which can start or end animations. TheDOM2 namein the second column is the name to use when defining DOM 2 event listeners ([DOM2EVENTS], section 1.3). TheEvent attribute namein the fourth column contains the corresponding name of the event attributes that can be attached to elements in the SVG language.

Requirements in the table on whether an event of a given type bubbles or is cancelable apply only to events that are created and dispatched by the user agent. Events of those types created from script using the createEvent method on the DocumentEvent interface can be made to bubble or be cancelable with the initEvent method.

Event name and description DOM2 name DOM2 category Event attribute name

focusin

Occurs when an element receives focus, such as when a‘text’becomes selected.

 DOMFocusIn UIEvent onfocusin

focusout

Occurs when an element loses focus, such as when a‘text’becomes unselected.

 DOMFocusOut UIEvent onfocusout

activate

Occurs when an element is activated, for instance, through a mouse click or a keypress. A numerical argument is provided to give an indication of the type of activation that occurs: 1 for a simple activation (e.g. a simple click or Enter), 2 for hyperactivation (for instance a double click or Shift Enter).

 DOMActivate UIEvent onactivate

click

Occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:mousedown,mouseup,click. If multiple clicks occur at the same screen location, the sequence repeats with thedetailattribute incrementing with each repetition.

 (same) MouseEvent onclick

mousedown

Occurs when the pointing device button is pressed over an element.

 (same) MouseEvent onmousedown

mouseup

Occurs when the pointing device button is released over an element.

 (same) MouseEvent onmouseup

mouseover

Occurs when the pointing device is moved onto an element.

 (same) MouseEvent onmouseover

mousemove

Occurs when the pointing device is moved while it is over an element.

 (same) MouseEvent onmousemove

mouseout

Occurs when the pointing device is moved away from an element.

 (same) MouseEvent onmouseout

DOMSubtreeModified

This is a general event for notification of all changes to the document. It can be used instead of the more specific events listed below. (The normative definition of this event is the description in the DOM2 specification.)

 (same) MutationEvent none

DOMNodeInserted

Fired when a node has been added as a child of another node. (The normative definition of this event is the description in the DOM2 specification.)

 (same) MutationEvent none

DOMNodeRemoved

Fired when a node is being removed from another node. (The normative definition of this event is the description in the DOM2 specification.)

 (same) MutationEvent none

DOMNodeRemovedFromDocument

Fired when a node is being removed from a document, either through direct removal of the Node or removal of a subtree in which it is contained. (The normative definition of this event is the description in the DOM2 specification.)

 (same) MutationEvent none

DOMNodeInsertedIntoDocument

Fired when a node is being inserted into a document, either through direct insertion of the Node or insertion of a subtree in which it is contained. (The normative definition of this event is the description in the DOM2 specification.)

 (same) MutationEvent none

DOMAttrModified

Fired after an attribute has been modified on a node. (The normative definition of this event is the description in the DOM2 specification.)

 (same) MutationEvent none

DOMCharacterDataModified

Fired after CharacterData within a node has been modified but the node itself has not been inserted or deleted. (The normative definition of this event is the description in the DOM2 specification.)

 (same) MutationEvent none

SVGLoad

The event is triggered at the point at which the user agent has fully parsed the element and its descendants and is ready to act appropriately upon that element, such as being ready to render the element to the target device. Referenced external resources that are required must be loaded, parsed and ready to render before the event is triggered. Optional external resources are not required to be ready for the event to be triggered.

SVGLoad events do not bubble and are not cancelable.

 (same) none onload

SVGUnload

Only applicable tooutermost svg elements. The unload event occurs when the DOM implementation removes a document from a window or frame.

SVGUnload events do not bubble and are not cancelable.

 (same) none onunload

SVGAbort

The abort event occurs when page loading is stopped before an element has been allowed to load completely.

SVGAbort events bubble but are not cancelable.

 (same) none onabort

SVGError

The error event occurs when an element does not load properly or when an error occurs during script execution.

SVGError events bubble but are not cancelable.

 (same) none onerror

SVGResize

Occurs when a document view is being resized. This event is only applicable tooutermost svg elementsand is dispatched after the resize operation has taken place. The target of the event is the‘svg’element.

SVGResize events bubble but are not cancelable.

 (same) none onresize

SVGScroll

Occurs when a document view is being shifted along the X or Y or both axis, either through a direct user interaction or any change on the currentTranslate property available on SVGSVGElement interface. This event is only applicable tooutermost svg elementsand is dispatched after the shift modification has taken place. The target of the event is the‘svg’element.

SVGScroll events bubble but are not cancelable.

 (same) none onscroll

SVGZoom

Occurs when the zoom level of a document view is being changed, either through a direct user interaction or any change to the currentScale property available on SVGSVGElement interface. This event is only applicable tooutermost svg elementsand is dispatched after the zoom level modification has taken place. The target of the event is the‘svg’element.

SVGZoom events bubble but are not cancelable.

 none none onzoom

beginEvent

Occurs when an animation element begins. For details, see the description of Interface TimeEvent in the SMIL Animation specification.

 none none onbegin

endEvent

Occurs when an animation element ends. For details, see the description of Interface TimeEvent in the SMIL Animation specification.

 none none onend

repeatEvent

Occurs when an animation element repeats. It is raised each time the element repeats, after the first iteration. For details, see the description of Interface TimeEvent in the SMIL Animation specification.

 none none onrepeat

As in DOM 2 Key events ([DOM2EVENTS], section 1.6.3), the SVG specification does not provide a key event set. An event set designed for use with keyboard input devices will be included in a later version of the DOM and SVG specifications.

Details on the parameters passed to event listeners for the event types from DOM2 can be found in the DOM2 specification. For other event types, the parameters passed to event listeners are described elsewhere in this specification.

Event listener attributes can be specified on some elements to listen to a given event. The script in such attributes is run only in response to "bubbling" and "at target" phase events dispatched to the element.

Likewise, event-value timing specifiers used inanimation element‘begin’and‘end’attributes are resolved to concrete times only in response to "bubbling" and "at target" phase events dispatched to the relevant element.

16.3 User interface events

On user agents which support interactivity, it is common for authors to define SVG documents such that they are responsive to user interface events. Among the set of possible user events are pointer events, keyboard events, and document events.

In response to user interface (UI) events, the author might start an animation, perform a hyperlink to another Web page, highlight part of the document (e.g., change the color of the graphics elements which are under the pointer), initiate a "roll-over" (e.g., cause some previously hidden graphics elements to appear near the pointer) or launch a script which communicates with a remote database.

16.4 Pointer events

User interface events that occur because of user actions performed on a pointer device are called pointer events.

Many systems support pointer devices such as a mouse or trackball. On systems which use a mouse, pointer events consist of actions such as mouse movements and mouse clicks. On systems with a different pointer device, the pointing device often emulates the behavior of the mouse by providing a mechanism for equivalent user actions, such as a button to press which is equivalent to a mouse click.

For each pointer event, the SVG user agent determines thetarget elementof a given pointer event. The target element is the topmost graphics element whose relevant graphical content is under the pointer at the time of the event. (See property‘pointer-events’for a description of how to determine whether an element's relevant graphical content is under the pointer, and thus in which circumstances that graphic element can be the target element for a pointer event.) When an element is not displayed (i.e., when the‘display’property on that element or one of its ancestors has a value ofnone), that element cannot be the target of pointer events.

If a target element for the pointer event exists, then the event is dispatched to that element according to the normal event flow ([DOM2EVENTS], section 1.2). Note, however, that if the target element is in a‘use’element shadow tree, that the event flow will include SVGElementInstance objects. See The‘use’element for details.

If a target element for the pointer event does not exist, then the event is ignored.

16.5 Hit-testing and processing order for user interface events

There are two distinct aspects of pointer-device interaction with an element or area:

  1. hit-testing, to determine if a pointer event (such as a mouse movement or mouse click) occurred within the interaction area of an element, and the subsequent DOM event flow;
  2. functional processing of actions associated with any relevant element.

16.5.1 Hit-testing

Determining whether a pointer event results in a positivehit-testdepends upon the position of the pointer, the size and shape of thegraphics element, and the computed value of the‘pointer-events’property on the element. The definition of the‘pointer-events’property below describes the exact region that is sensitive to pointer events for a given type of graphics element.

Note that the‘svg’element is not agraphics element, and in a Conforming SVG Stand-Alone File arootmost‘svg’elementwill never be the target of pointer events, though events can bubble to this element. If a pointer event does not result in a positivehit-teston agraphics element, then it should evoke any user-agent-specific window behavior, such as a presenting a context menu or controls to allow zooming and panning of an SVG document fragment.

This specification does not define the behavior of pointer events on therootmost‘svg’elementfor SVG images which are embedded by reference or inclusion within another document, e.g., whether therootmost‘svg’elementembedded in an HTML document intercepts mouse click events; future specifications may define this behavior, but for the purpose of this specification, the behavior is implementation-specific.

16.5.2 Event processing

An element which is the target of a user interface event may have particular interaction behaviors, depending upon the type of element and whether it has explicit associated interactions, such as scripted event listeners, CSS pseudo-classes matches, or declarative animations with event-based timing. The algorithm and order for processing user interface events for a given target element, after dispatching the DOM event, is as follows:

  1. If an event handler registered on this element invokes thepreventDefault()DOM method, then no further processing for this element is performed, and the event follows the event flow processing as described in DOM Level 2 Events [DOM2EVENTS] (or its successor);
  2. If the element has an associated title or description, such as a‘title’element or an‘xlink:title’attribute, and the user agent supports the display of such information (e.g. via a tooltip or status-bar message), that information should be displayed, as appropriate to the type of pointer event;
  3. If the element matches any relevant dynamic pseudo-class selectors appropriate to the type of pointer event, such as:hover,:active, or:focusas described in [CSS2], section 5.11, then the relevant class properties are applied;
  4. If the element and the event type are associated with the activation or cancelation of declarative animation though the use of event-value timing specifiers, any corresponding instance times must be resolved, and any conseqential actions of this instance time resolution (such as immediately starting or stopping the animation) must be performed;
  5. If the element is a hyperlink (e.g., it is a descendant element of an‘a’element), and the pointer event is of a type that activates that hyperlink (e.g. via a mouse click), and if the hyperlink traversal changes the context of the content (e.g. opens a different document, or moves the pointer away from this element by moving to another part of the same document), then no further processing for this element is performed;
  6. If the element is atext content element, and the event type is one which the user agent recognizes as part of a text-selection operation (e.g., a mouse click and drag, or a double-click), then the text selection algorithm is performed;
  7. If the event type is one which the user agent associates with the evocation of special user-interface controls (e.g., a right-click or command-click evoking a context menu), the user agent should evoke such user-agent-specific behavior, such as presenting a context menu or controls to allow zooming and panning of an SVG document fragment.

16.6 The‘pointer-events’property

In different circumstances, authors may want to control under what conditions particular graphic elements can become the target of pointer events. For example, the author might want a given element to receive pointer events only when the pointer is over the stroked perimeter of a given shape. In other cases, the author might want a given element to ignore pointer events under all circumstances so that graphical elements underneath the given element will become the target of pointer events.

The effects of masking and clipping differ with respect to pointer-events. A clip path is a geometric boundary, and a given point is clearly either inside or outside that boundary; thus, pointer events must be captured normally over the rendered areas of a clipped element, but must not be captured over the clipped areas, as described in the definition of clipping paths. By contrast, a mask is not a binary transition, but a pixel operation, and different behavior for fully transparent and almost-but-not-fully-transparent may be confusingly arbitrary; as a consequence, for elements with a mask applied, pointer-events must still be captured even in areas where the mask goes to zero opacity. If an author wishes to achieve an effect where the transparent parts of a mask allow pointer-events to pass to an element below, a combination of masking and clipping may be used.

The‘filter’property has no effect on pointer-events processing, and must in this context be treated as if the‘filter’wasn't specified.

For example, suppose a circle with a‘stroke’ofred(i.e., the outline is solid red) and a‘fill’ofnone(i.e., the interior is not painted) is rendered directly on top of a rectangle with a‘fill’ofblue. The author might want the circle to be the target of pointer events only when the pointer is over the perimeter of the circle. When the pointer is over the interior of the circle, the author might want the underlying rectangle to be the target element of pointer events.

The‘pointer-events’property specifies under what circumstances a given graphics element can be the target element for a pointer event. It affects the circumstances under which the following are processed:

  • user interface events such as mouse clicks
  • dynamic pseudo-classes (i.e., :hover, :active and :focus; [CSS2], section 5.11)
  • hyperlinks (see Links out of SVG content: the‘a’element)
‘pointer-events’
Value: visiblePainted | visibleFill | visibleStroke | visible |
painted | fill | stroke | all | none |inherit
Initial: visiblePainted
Applies to: graphics elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes
visiblePainted
The given element can be the target element for pointer events when the ‘visibility’property is set to visibleand when the pointer is over a "painted" area. The pointer is over a painted area if it is over the interior (i.e., fill) of the element and the ‘fill’property has an actual value other than noneor it is over the perimeter (i.e., stroke) of the element and the ‘stroke’property is set to a value other than none.
visibleFill
The given element can be the target element for pointer events when the ‘visibility’property is set to visibleand when the pointer is over the interior (i.e., fill) of the element. The value of the ‘fill’property does not affect event processing.
visibleStroke
The given element can be the target element for pointer events when the ‘visibility’property is set to visibleand when the pointer is over the perimeter (i.e., stroke) of the element. The value of the ‘stroke’property does not affect event processing.
visible
The given element can be the target element for pointer events when the ‘visibility’property is set to visibleand the pointer is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the ‘fill’and ‘stroke’do not affect event processing.
painted
The given element can be the target element for pointer events when the pointer is over a "painted" area. The pointer is over a painted area if it is over the interior (i.e., fill) of the element and the ‘fill’property has an actual value other than noneor it is over the perimeter (i.e., stroke) of the element and the ‘stroke’property has an actual value other than none. The value of the ‘visibility’property does not effect event processing.
fill
The given element can be the target element for pointer events when the pointer is over the interior (i.e., fill) of the element. The values of the ‘fill’and ‘visibility’properties do not affect event processing.
stroke
The given element can be the target element for pointer events when the pointer is over the perimeter (i.e., stroke) of the element. The values of the ‘stroke’and ‘visibility’properties do not affect event processing.
all
The given element can be the target element for pointer events whenever the pointer is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the ‘fill’, ‘stroke’and ‘visibility’properties do not affect event processing.
none
The given element does not receive pointer events.

For text elements, hit-testing is performed on a character cell basis:

  • The valuevisiblePaintedmeans that the text string can receive events anywhere within the character cell if either the‘fill’property is set to a value other thannoneor the‘stroke’property is set to a value other thannone, with the additional requirement that the‘visibility’property is set tovisible.
  • The valuesvisibleFill,visibleStrokeandvisibleare equivalent and indicate that the text string can receive events anywhere within the character cell if the‘visibility’property is set tovisible. The values of the‘fill’and‘stroke’properties do not affect event processing.
  • The valuepaintedmeans that the text string can receive events anywhere within the character cell if either the‘fill’property is set to a value other thannoneor the‘stroke’property is set to a value other thannone. The value of the‘visibility’property does not affect event processing.
  • The valuesfill,strokeandallare equivalent and indicate that the text string can receive events anywhere within the character cell. The values of the‘fill’,‘stroke’and‘visibility’properties do not affect event processing.
  • The valuenoneindicates that the given text does not receive pointer events.

For raster images, hit-testing is either performed on a whole-image basis (i.e., the rectangular area for the image is one of the determinants for whether the image receives the event) or on a per-pixel basis (i.e., the alpha values for pixels under the pointer help determine whether the image receives the event):

  • The valuevisiblePaintedmeans that the raster image can receive events anywhere within the bounds of the image if any pixel from the raster image which is under the pointer is not fully transparent, with the additional requirement that the‘visibility’property is set tovisible.
  • The valuesvisibleFill,visibleStrokeandvisibleare equivalent and indicate that the image can receive events anywhere within the rectangular area for the image if the‘visibility’property is set tovisible.
  • The valuepaintedmeans that the raster image can receive events anywhere within the bounds of the image if any pixel from the raster image which is under the pointer is not fully transparent. The value of the‘visibility’property does not affect event processing.
  • The valuesfill,strokeandallare equivalent and indicate that the image can receive events anywhere within the rectangular area for the image. The value of the‘visibility’property does not affect event processing.
  • The valuenoneindicates that the image does not receive pointer events.

Note that for raster images, the values of properties‘opacity’,‘fill-opacity’,‘stroke-opacity’,‘fill’and‘stroke’do not affect event processing.

16.7 Magnification and panning

Magnification represents a complete, uniform transformation on an SVG document fragment, where the magnify operation scales all graphical elements by the same amount. A magnify operation has the effect of a supplemental scale and translate transformation placed at the outermost level on the SVG document fragment (i.e., outside theoutermost svg element).

Panning represents a translation (i.e., a shift) transformation on an SVG document fragment in response to a user interface action.

SVG user agents that operate in interaction-capable user environments are required to support the ability to magnify and pan.

Theoutermost svg elementin an SVG document fragment has attribute‘zoomAndPan’, which takes the possible values ofdisableandmagnify, with the default beingmagnify.

Ifdisable, the user agent shall disable any magnification and panning controls and not allow the user to magnify or pan on the given document fragment.

Ifmagnify, in environments that support user interactivity, the user agent shall provide controls to allow the user to perform a "magnify" operation on the document fragment.

If a‘zoomAndPan’attribute is assigned to an inner‘svg’element, the‘zoomAndPan’setting on the inner‘svg’element will have no effect on the SVG user agent.

Animatable: no.

16.8 Cursors

16.8.1 Introduction to cursors

Some interactive display environments provide the ability to modify the appearance of the pointer, which is also known as thecursor. Three types of cursors are available:

  • Standard built-in cursors
  • Platform-specific custom cursors
  • Platform-independent custom cursors

The‘cursor’property is used to specify which cursor to use. The‘cursor’property can be used to reference standard built-in cursors by specifying a keyword such ascrosshairor a custom cursor. Custom cursors are referenced via a and can point to either an external resource such as a platform-specific cursor file or to a‘cursor’element, which can be used to define a platform-independent cursor.

16.8.2 The‘cursor’property

‘cursor’
Value: [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] |inherit
Initial: auto
Applies to: container elements and graphics elements
Inherited: yes
Percentages: N/A
Media: visual, interactive
Animatable: yes

This property specifies the type of cursor to be displayed for the pointing device. Values have the following meanings:

auto
The UA determines the cursor to display based on the current context.
crosshair
A simple crosshair (e.g., short line segments resembling a "+" sign).
default
The platform-dependent default cursor. Often rendered as an arrow.
pointer
The cursor is a pointer that indicates a link.
move
Indicates something is to be moved.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.
text
Indicates text that can be selected. Often rendered as an I-bar.
wait
Indicates that the program is busy. Often rendered as a watch or hourglass.
help
Help is available for the object under the cursor. Often rendered as a question mark or a balloon.
The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it shall attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor at the end of the list. 
P { cursor : url("mything.cur"), url("second.svg#curs"), text; }

The‘cursor’property for SVG is identical to the‘cursor’property defined in CSS2 ([CSS2], section 18.1), with the additional requirement that SVG user agents must support cursors defined by the SVG‘cursor’element. This gives a single, cross-platform, interoperable cursor format, with PNG as the raster component.

16.8.3 The‘cursor’element

The‘cursor’element can be used to define a platform-independent custom cursor. A recommended approach for defining a platform-independent custom cursor is to create a PNG image [PNG] and define a‘cursor’element that references the PNG image and identifies the exact position within the image which is the pointer position (i.e., the hot spot).

The PNG format is recommended because it supports the ability to define a transparency mask via an alpha channel. If a different image format is used, this format should support the definition of a transparency mask (two options: provide an explicit alpha channel or use a particular pixel color to indicate transparency). If the transparency mask can be determined, the mask defines the shape of the cursor; otherwise, the cursor is an opaque rectangle. Typically, the other pixel information (e.g., the R, G and B channels) defines the colors for those parts of the cursor which are not masked out. Note that cursors usually contain at least two colors so that the cursor can be visible over most backgrounds.

‘cursor’
Categories:
None
Content model:
Any number of the following elements, in any order:
  • descriptive elements—‘desc’,‘metadata’,‘title’
Attributes:
  • core attributes—‘id’,‘xml:base’,‘xml:lang’,‘xml:space’
  • conditional processing attributes—‘requiredFeatures’,‘requiredExtensions’,‘systemLanguage’
  • xlink attributes—‘xlink:href’,‘xlink:show’,‘xlink:actuate’,‘xlink:type’,‘xlink:role’,‘xlink:arcrole’,‘xlink:title’
  • ‘externalResourcesRequired’
  • ‘x’
  • ‘y’
  • ‘xlink:href’
DOM Interfaces:
  • SVGCursorElement

Attribute definitions:

x= " "
The x-coordinateof the position in the cursor's coordinate system which represents the precise position that is being pointed to.
If the attribute is not specified, the effect is as if a value of '0'were specified.
Animatable: yes.
y= " "
The y-coordinateof the position in the cursor's coordinate system which represents the precise position that is being pointed to.
If the attribute is not specified, the effect is as if a value of '0'were specified.
Animatable: yes.
xlink:href= " "
A Functional IRI reference to the file or element which provides the image of the cursor.
Animatable: yes.

SVG user agents are required to support PNG format images as targets of the‘xlink:href’attribute.

16.9 DOM interfaces

16.9.1 Interface SVGCursorElement

The SVGCursorElement interface corresponds to the ‘cursor’element. 
interfaceSVGCursorElement: SVGElement, SVGURIReference, SVGTests, SVGExternalResourcesRequired { readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; };
Attributes:
x (readonly SVGAnimatedLength)
Corresponds to attribute ‘x’on the given ‘cursor’element.
y (readonly SVGAnimatedLength)
Corresponds to attribute ‘y’on the given ‘cursor’element.
SVG 1.1 (Second Edition) – 16 August 2011Top ⋅ Contents ⋅ Previous ⋅ Next ⋅ Elements ⋅ Attributes ⋅ Properties
Vorheriger Artikel： Nächster Artikel：