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

©
Ce document utiliseManuel du site Web PHP chinoisLibérer

personnages

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

8 Paths

Contents

  • 8.1 Introduction
  • 8.2 The‘path’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ézier curve commands
    • 8.3.7 The quadratic Bézier 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

8.1 Introduction

Paths represent the outline of a shape which can be filled, stroked, used as a clipping path, or any combination of the three. (See Filling, Stroking and Paint Servers and Clipping, Masking and Compositing.)

A path is described using the concept of a current point. In an analogy with drawing on paper, the current point can be thought of as the location of the pen. The position of the pen can be changed, and the outline of a shape (open or closed) can be traced by dragging the pen in either straight lines or curves.

Paths represent the geometry of the outline of an object, defined in terms ofmoveto(set a new current point),lineto(draw a straight line),curveto(draw a curve using a cubic Bézier),arc(elliptical or circular arc) andclosepath(close the current shape by drawing a line to the lastmoveto) elements. Compound paths (i.e., a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects.

This chapter describes the syntax, behavior and DOM interfaces for SVG paths. Various implementation notes for SVG paths can be found in‘path’element implementation notes and Elliptical arc implementation notes.

A path is defined in SVG using the‘path’element.

8.2 The‘path’element

‘path’
Categories:
Graphics element, shape element
Content model:
Any number of the following elements, in any order:
  • animation elements—‘animate’,‘animateColor’,‘animateMotion’,‘animateTransform’,‘set’
  • descriptive elements—‘desc’,‘metadata’,‘title’
Attributes:
  • conditional processing attributes—‘requiredFeatures’,‘requiredExtensions’,‘systemLanguage’
  • core attributes—‘id’,‘xml:base’,‘xml:lang’,‘xml:space’
  • graphical event attributes—‘onfocusin’,‘onfocusout’,‘onactivate’,‘onclick’,‘onmousedown’,‘onmouseup’,‘onmouseover’,‘onmousemove’,‘onmouseout’,‘onload’
  • 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’
  • ‘d’
  • ‘pathLength’
DOM Interfaces:
  • SVGPathElement

Attribute definitions:

d= " path data"
The definition of the outline of a shape. See Path data.
Animatable: yes.Path data animation is only possible when each path data specification within an animation specification has exactly the same list of path data commands as the ‘d’attribute. If an animation is specified and the list of path data commands is not the same, then the animation specification is in error (see Error Processing). The animation engine interpolates each parameter to each path data command separately based on the attributes to the given animation element. Flags and booleans are interpolated as fractions between zero and one, with any non-zero value considered to be a value of one/true.
pathLength= ""
The author's computation of the total length of the path, in user units. This value is used to calibrate the user agent's own distance-along-a-path calculations with that of the author. The user agent will scale all distance-along-a-path computations by the ratio of ‘pathLength’to the user agent's own computed value for total path length. ‘pathLength’potentially affects calculations for text on a path, motion animation and various stroke operations.
A negative value is an error (see Error processing).
Animatable: yes.

8.3 Path data

8.3.1 General information about path data

A path is defined by including a‘path’element which contains ad="(path data)"attribute, where the‘d’attribute contains themoveto,line,curve(both cubic and quadratic Béziers),arcandclosepathinstructions.

Example triangle01specifies a path in the shape of a triangle. (TheMindicates amoveto, theLs indicatelinetos, and thezindicates aclosepath).

   Example triangle01- simple example of a 'path' A path that draws a triangle
Example triangle01
Example triangle01 — simple example of a 'path'

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

Path data can contain newline characters and thus can be broken up into multiple lines to improve readability. Because of line length limitations with certain related tools, it is recommended that SVG generators split long path data strings across multiple lines, with each line not exceeding 255 characters. Also note that newline characters are only allowed at certain places within path data.

The syntax of path data is concise in order to allow for minimal file size and efficient downloads, since many SVG files will be dominated by their path data. Some of the ways that SVG attempts to minimize the size of path data are as follows:

  • All instructions are expressed as one character (e.g., amovetois expressed as anM).
  • Superfluous white space and separators such as commas can be eliminated (e.g., "M 100 100 L 200 200" contains unnecessary spaces and could be expressed more compactly as "M100 100L200 200").
  • The command letter can be eliminated on subsequent commands if the same command is used multiple times in a row (e.g., you can drop the second "L" in "M 100 200 L 200 100 L -100 -200" and use "M 100 200 L 200 100 -100 -200" instead).
  • Relative versions of all commands are available (uppercase means absolute coordinates, lowercase means relative coordinates).
  • Alternate forms oflinetoare available to optimize the special cases of horizontal and vertical lines (absolute and relative).
  • Alternate forms ofcurveare available to optimize the special cases where some of the control points on the current segment can be determined automatically from the control points on the previous segment.

The path data syntax is a prefix notation (i.e., commands followed by parameters). The only allowable decimal point is a Unicode U+0046 FULL STOP (".") character (also referred to in Unicode as PERIOD, dot and decimal point) and no other delimiter characters are allowed [UNICODE]. (For example, the following is an invalid numeric value in a path data stream: "13,000.56". Instead, say: "13000.56".)

For the relative versions of the commands, all coordinate values are relative to the current point at the start of the command.

In the tables below, the following notation is used:

  • (): grouping of parameters
  • +: 1 or more of the given parameter(s) is required

The following sections list the commands.

8.3.2 The"moveto"commands

The "moveto" commands (Morm) establish a new current point. The effect is as if the "pen" were lifted and moved to a new location. A path data segment (if there is one) must begin with a "moveto" command. Subsequent "moveto" commands (i.e., when the "moveto" is not the first command) represent the start of a newsubpath:

Command Name Parameters Description
M(absolute)
m(relative)		 moveto (x y)+ Start a new sub-path at the given (x,y) coordinate.M(uppercase) indicates that absolute coordinates will follow;m(lowercase) indicates that relative coordinates will follow. If a moveto is followed by multiple pairs of coordinates, the subsequent pairs are treated as implicit lineto commands. Hence, implicit lineto commands will be relative if the moveto is relative, and absolute if the moveto is absolute. If a relative moveto (m) appears as the first element of the path, then it is treated as a pair of absolute coordinates. In this case, subsequent pairs of coordinates are treated as relative even though the initial moveto is interpreted as an absolute moveto.

8.3.3 The"closepath"command

The "closepath" (Zorz) ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath. If a "closepath" is followed immediately by a "moveto", then the "moveto" identifies the start point of the next subpath. If a "closepath" is followed immediately by any other command, then the next subpath starts at the same initial point as the current subpath.

When a subpath ends in a "closepath," it differs in behavior from what happens when "manually" closing a subpath via a "lineto" command in how‘stroke-linejoin’and‘stroke-linecap’are implemented. With "closepath", the end of the final segment of the subpath is "joined" with the start of the initial segment of the subpath using the current value of‘stroke-linejoin’. If you instead "manually" close the subpath via a "lineto" command, the start of the first segment and the end of the last segment are not joined but instead are each capped using the current value of‘stroke-linecap’. At the end of the command, the new current point is set to the initial point of the current subpath.

Command Name Parameters Description
Zor
z		 closepath (none) Close the current subpath by drawing a straight line from the current point to current subpath's initial point. Since the Z and z commands take no parameters, they have an identical effect.

8.3.4 The"lineto"commands

The various "lineto" commands draw straight lines from the current point to a new point:

Command Name Parameters Description
L(absolute)
l(relative)		 lineto (x y)+ Draw a line from the current point to the given (x,y) coordinate which becomes the new current point.L(uppercase) indicates that absolute coordinates will follow;l(lowercase) indicates that relative coordinates will follow. A number of coordinates pairs may be specified to draw a polyline. At the end of the command, the new current point is set to the final set of coordinates provided.
H(absolute)
h(relative)		 horizontal lineto x+ Draws a horizontal line from the current point (cpx, cpy) to (x, cpy).H(uppercase) indicates that absolute coordinates will follow;h(lowercase) indicates that relative coordinates will follow. Multiple x values can be provided (although usually this doesn't make sense). At the end of the command, the new current point becomes (x, cpy) for the final value of x.
V(absolute)
v(relative)		 vertical lineto y+ Draws a vertical line from the current point (cpx, cpy) to (cpx, y).V(uppercase) indicates that absolute coordinates will follow;v(lowercase) indicates that relative coordinates will follow. Multiple y values can be provided (although usually this doesn't make sense). At the end of the command, the new current point becomes (cpx, y) for the final value of y.

8.3.5 The curve commands

These three groups of commands draw curves:

  • Cubic Bézier commands (C,c,Sands). A cubic Bézier segment is defined by a start point, an end point, and two control points.
  • Quadratic Bézier commands (Q,q,Tandt). A quadratic Bézier segment is defined by a start point, an end point, and one control point.
  • Elliptical arc commands (Aanda). An elliptical arc segment draws a segment of an ellipse.

8.3.6 The cubic Bézier curve commands

The cubic Bézier commands are as follows:

Command Name Parameters Description
C(absolute)
c(relative)		 curveto (x1 y1 x2 y2 x y)+ Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve.C(uppercase) indicates that absolute coordinates will follow;c(lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.
S(absolute)
s(relative)		 shorthand/smooth curveto (x2 y2 x y)+ Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (If there is no previous command or if the previous command was not an C, c, S or s, assume the first control point is coincident with the current point.) (x2,y2) is the second control point (i.e., the control point at the end of the curve).S(uppercase) indicates that absolute coordinates will follow;s(lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

Example cubic01shows some simple uses of cubic Bézier commands within a path. The example uses an internal CSS style sheet to assign styling properties. Note that the control point for the "S" command is computed automatically as the reflection of the control point for the previous "C" command relative to the start point of the "S" command.

   Example cubic01- cubic Bézier commands in path data Picture showing a simple example of path data using both a "C" and an "S" command, along with annotations showing the control points and end points               M100,200 C100,100 250,100 250,200 S400,300 400,200
Example cubic01
Example cubic01 — cubic Bézier comamnds in path data

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

The following picture shows some how cubic Bézier curves change their shape depending on the position of the control points. The first five examples illustrate a single cubic Bézier path segment. The example at the lower right shows a "C" command followed by an "S" command.

Example cubic02 - cubic Bézier commands in path data

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

8.3.7 The quadratic Bézier curve commands

The quadratic Bézier commands are as follows:

Command Name Parameters Description
Q(absolute)
q(relative)		 quadratic Bézier curveto (x1 y1 x y)+ Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point.Q(uppercase) indicates that absolute coordinates will follow;q(lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.
T(absolute)
t(relative)		 Shorthand/smooth quadratic Bézier curveto (x y)+ Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. (If there is no previous command or if the previous command was not a Q, q, T or t, assume the control point is coincident with the current point.)T(uppercase) indicates that absolute coordinates will follow;t(lowercase) indicates that relative coordinates will follow. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

Example quad01shows some simple uses of quadratic Bézier commands within a path. Note that the control point for the "T" command is computed automatically as the reflection of the control point for the previous "Q" command relative to the start point of the "T" command.

   Example quad01 - quadratic Bézier commands in path data Picture showing a "Q" a "T" command, along with annotations showing the control points and end points
Example quad01
Example quad01 — quadratic Bézier commands in path data

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

8.3.8 The elliptical arc curve commands

The elliptical arc commands are as follows:

Command Name Parameters Description
A(absolute)
a(relative)		 elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Draws an elliptical arc from the current point to (x,y). The size and orientation of the ellipse are defined by two radii (rx,ry) and anx-axis-rotation, which indicates how the ellipse as a whole is rotated relative to the current coordinate system. The center (cx,cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters.large-arc-flagandsweep-flagcontribute to the automatic calculations and help determine how the arc is drawn.

Example arcs01shows some simple uses of arc commands within a path.

   Example arcs01 - arc commands in path data Picture of a pie chart with two pie wedges and a picture of a line with arc blips
Example arcs01
Example arcs01 — arc commands in path data

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

The elliptical arc command draws a section of an ellipse which meets the following constraints:

  • the arc starts at the current point
  • the arc ends at point (x,y)
  • the ellipse has the two radii (rx,ry)
  • the x-axis of the ellipse is rotated byx-axis-rotationrelative to the x-axis of the current coordinate system.
For most situations, there are actually four different arcs (two different ellipses, each with two different arc sweeps) that satisfy these constraints. large-arc-flagand sweep-flagindicate which one of the four arcs are drawn, as follows:
  • Of the four candidate arc sweeps, two will represent an arc sweep of greater than or equal to 180 degrees (the "large-arc"), and two will represent an arc sweep of less than or equal to 180 degrees (the "small-arc"). Iflarge-arc-flagis '1', then one of the two larger arc sweeps will be chosen; otherwise, iflarge-arc-flagis '0', one of the smaller arc sweeps will be chosen,
  • Ifsweep-flagis '1', then the arc will be drawn in a "positive-angle" direction (i.e., the ellipse formula x=cx+rx*cos(theta) and y=cy+ry*sin(theta) is evaluated such that theta starts at an angle corresponding to the current point and increases positively until the arc reaches (x,y)). A value of 0 causes the arc to be drawn in a "negative-angle" direction (i.e., theta starts at an angle value corresponding to the current point and decreases until the arc reaches (x,y)).

The following illustrates the four combinations oflarge-arc-flagandsweep-flagand the four different arcs that will be drawn based on the values of these flags. For each case, the following path data command was used:

where "?,?" is replaced by "0,0" "0,1" "1,0" and "1,1" to generate the four possible cases.

Illustration of flags in arc commands

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

Refer to Elliptical arc implementation notes for detailed implementation notes for the path data elliptical arc commands.

8.3.9 The grammar for path data

The following notation is used in the Backus-Naur Form (BNF) description of the grammar for path data:

  • *: 0 or more
  • +: 1 or more
  • ?: 0 or 1
  • (): grouping
  • |: separates alternatives
  • double quotes surround literals

The following is the BNF for SVG paths.

svg-path: wsp* moveto-drawto-command-groups? wsp* moveto-drawto-command-groups: moveto-drawto-command-group | moveto-drawto-command-group wsp* moveto-drawto-command-groups moveto-drawto-command-group: moveto wsp* drawto-commands? drawto-commands: drawto-command | drawto-command wsp* drawto-commands drawto-command: closepath | lineto | horizontal-lineto | vertical-lineto | curveto | smooth-curveto | quadratic-bezier-curveto | smooth-quadratic-bezier-curveto | elliptical-arc moveto: ( "M" | "m" ) wsp* moveto-argument-sequence moveto-argument-sequence: coordinate-pair | coordinate-pair comma-wsp? lineto-argument-sequence closepath: ("Z" | "z") lineto: ( "L" | "l" ) wsp* lineto-argument-sequence lineto-argument-sequence: coordinate-pair | coordinate-pair comma-wsp? lineto-argument-sequence horizontal-lineto: ( "H" | "h" ) wsp* horizontal-lineto-argument-sequence horizontal-lineto-argument-sequence: coordinate | coordinate comma-wsp? horizontal-lineto-argument-sequence vertical-lineto: ( "V" | "v" ) wsp* vertical-lineto-argument-sequence vertical-lineto-argument-sequence: coordinate | coordinate comma-wsp? vertical-lineto-argument-sequence curveto: ( "C" | "c" ) wsp* curveto-argument-sequence curveto-argument-sequence: curveto-argument | curveto-argument comma-wsp? curveto-argument-sequence curveto-argument: coordinate-pair comma-wsp? coordinate-pair comma-wsp? coordinate-pair smooth-curveto: ( "S" | "s" ) wsp* smooth-curveto-argument-sequence smooth-curveto-argument-sequence: smooth-curveto-argument | smooth-curveto-argument comma-wsp? smooth-curveto-argument-sequence smooth-curveto-argument: coordinate-pair comma-wsp? coordinate-pair quadratic-bezier-curveto: ( "Q" | "q" ) wsp* quadratic-bezier-curveto-argument-sequence quadratic-bezier-curveto-argument-sequence: quadratic-bezier-curveto-argument | quadratic-bezier-curveto-argument comma-wsp? quadratic-bezier-curveto-argument-sequence quadratic-bezier-curveto-argument: coordinate-pair comma-wsp? coordinate-pair smooth-quadratic-bezier-curveto: ( "T" | "t" ) wsp* smooth-quadratic-bezier-curveto-argument-sequence smooth-quadratic-bezier-curveto-argument-sequence: coordinate-pair | coordinate-pair comma-wsp? smooth-quadratic-bezier-curveto-argument-sequence elliptical-arc: ( "A" | "a" ) wsp* elliptical-arc-argument-sequence elliptical-arc-argument-sequence: elliptical-arc-argument | elliptical-arc-argument comma-wsp? elliptical-arc-argument-sequence elliptical-arc-argument: nonnegative-number comma-wsp? nonnegative-number comma-wsp? number comma-wsp flag comma-wsp? flag comma-wsp? coordinate-pair coordinate-pair: coordinate comma-wsp? coordinate coordinate: number nonnegative-number: integer-constant | floating-point-constant number: sign? integer-constant | sign? floating-point-constant flag: "0" | "1" comma-wsp: (wsp+ comma? wsp*) | (comma wsp*) comma: "," integer-constant: digit-sequence floating-point-constant: fractional-constant exponent? | digit-sequence exponent fractional-constant: digit-sequence? "." digit-sequence | digit-sequence "." exponent: ( "e" | "E" ) sign? digit-sequence sign: "+" | "-" digit-sequence: digit | digit digit-sequence digit: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" wsp: (#x20 | #x9 | #xD | #xA)

The processing of the BNF must consume as much of a given BNF production as possible, stopping at the point when a character is encountered which no longer satisfies the production. Thus, in the string "M 100-200", the first coordinate for the "moveto" consumes the characters "100" and stops upon encountering the minus sign because the minus sign cannot follow a digit in the production of a "coordinate". The result is that the first coordinate will be "100" and the second coordinate will be "-200".

Similarly, for the string "M 0.6.5", the first coordinate of the "moveto" consumes the characters "0.6" and stops upon encountering the second decimal point because the production of a "coordinate" only allows one decimal point. The result is that the first coordinate will be "0.6" and the second coordinate will be ".5".

Note that the BNF allows the path‘d’attribute to be empty. This is not an error, instead it disables rendering of the path.

8.4 Distance along a path

Various operations, including text on a path and motion animation and various stroke operations, require that the user agent compute the distance along the geometry of a graphics element, such as a‘path’.

Exact mathematics exist for computing distance along a path, but the formulas are highly complex and require substantial computation. It is recommended that authoring products and user agents employ algorithms that produce as precise results as possible; however, to accommodate implementation differences and to help distance calculations produce results that approximate author intent, the‘pathLength’attribute can be used to provide the author's computation of the total length of the path so that the user agent can scale distance-along-a-path computations by the ratio of‘pathLength’to the user agent's own computed value for total path length.

A "moveto" operation within a‘path’element is defined to have zero length. Only the various "lineto", "curveto" and "arcto" commands contribute to path length calculations.

8.5 DOM interfaces

8.5.1 Interface SVGPathSeg

The SVGPathSeg interface is a base interface that corresponds to a single command within a path data specification. 
interfaceSVGPathSeg{ // Path Segment Types const unsigned short PATHSEG_UNKNOWN = 0; const unsigned short PATHSEG_CLOSEPATH = 1; const unsigned short PATHSEG_MOVETO_ABS = 2; const unsigned short PATHSEG_MOVETO_REL = 3; const unsigned short PATHSEG_LINETO_ABS = 4; const unsigned short PATHSEG_LINETO_REL = 5; const unsigned short PATHSEG_CURVETO_CUBIC_ABS = 6; const unsigned short PATHSEG_CURVETO_CUBIC_REL = 7; const unsigned short PATHSEG_CURVETO_QUADRATIC_ABS = 8; const unsigned short PATHSEG_CURVETO_QUADRATIC_REL = 9; const unsigned short PATHSEG_ARC_ABS = 10; const unsigned short PATHSEG_ARC_REL = 11; const unsigned short PATHSEG_LINETO_HORIZONTAL_ABS = 12; const unsigned short PATHSEG_LINETO_HORIZONTAL_REL = 13; const unsigned short PATHSEG_LINETO_VERTICAL_ABS = 14; const unsigned short PATHSEG_LINETO_VERTICAL_REL = 15; const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_ABS = 16; const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_REL = 17; const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18; const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19; readonly attribute unsigned short pathSegType; readonly attribute DOMString pathSegTypeAsLetter; };
Constants in group “Path Segment Types”:
PATHSEG_UNKNOWN (unsigned short)
The unit type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
PATHSEG_CLOSEPATH (unsigned short)
Corresponds to a "closepath" (z) path data command.
PATHSEG_MOVETO_ABS (unsigned short)
Corresponds to a "absolute moveto" (M) path data command.
PATHSEG_MOVETO_REL (unsigned short)
Corresponds to a "relative moveto" (m) path data command.
PATHSEG_LINETO_ABS (unsigned short)
Corresponds to a "absolute lineto" (L) path data command.
PATHSEG_LINETO_REL (unsigned short)
Corresponds to a "relative lineto" (l) path data command.
PATHSEG_CURVETO_CUBIC_ABS (unsigned short)
Corresponds to a "absolute cubic Bézier curveto" (C) path data command.
PATHSEG_CURVETO_CUBIC_REL (unsigned short)
Corresponds to a "relative cubic Bézier curveto" (c) path data command.
PATHSEG_CURVETO_QUADRATIC_ABS (unsigned short)
Corresponds to a "absolute quadratic Bézier curveto" (Q) path data command.
PATHSEG_CURVETO_QUADRATIC_REL (unsigned short)
Corresponds to a "relative quadratic Bézier curveto" (q) path data command.
PATHSEG_ARC_ABS (unsigned short)
Corresponds to a "absolute arcto" (A) path data command.
PATHSEG_ARC_REL (unsigned short)
Corresponds to a "relative arcto" (a) path data command.
PATHSEG_LINETO_HORIZONTAL_ABS (unsigned short)
Corresponds to a "absolute horizontal lineto" (H) path data command.
PATHSEG_LINETO_HORIZONTAL_REL (unsigned short)
Corresponds to a "relative horizontal lineto" (h) path data command.
PATHSEG_LINETO_VERTICAL_ABS (unsigned short)
Corresponds to a "absolute vertical lineto" (V) path data command.
PATHSEG_LINETO_VERTICAL_REL (unsigned short)
Corresponds to a "relative vertical lineto" (v) path data command.
PATHSEG_CURVETO_CUBIC_SMOOTH_ABS (unsigned short)
Corresponds to a "absolute smooth cubic curveto" (S) path data command.
PATHSEG_CURVETO_CUBIC_SMOOTH_REL (unsigned short)
Corresponds to a "relative smooth cubic curveto" (s) path data command.
PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS (unsigned short)
Corresponds to a "absolute smooth quadratic curveto" (T) path data command.
PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL (unsigned short)
Corresponds to a "relative smooth quadratic curveto" (t) path data command.
Attributes:
pathSegType (readonly unsigned short)
The type of the path segment as specified by one of the constants defined on this interface.
pathSegTypeAsLetter (readonly DOMString)
The type of the path segment, specified by the corresponding one character command name.

8.5.2 Interface SVGPathSegClosePath

The SVGPathSegClosePath interface corresponds to a "closepath" (z) path data command. 
interfaceSVGPathSegClosePath: SVGPathSeg { };

8.5.3 Interface SVGPathSegMovetoAbs

The SVGPathSegMovetoAbs interface corresponds to an "absolute moveto" (M) path data command. 
interfaceSVGPathSegMovetoAbs: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); };
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.4 Interface SVGPathSegMovetoRel

The SVGPathSegMovetoRel interface corresponds to a "relative moveto" (m) path data command. 
interfaceSVGPathSegMovetoRel: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); };
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.5 Interface SVGPathSegLinetoAbs

The SVGPathSegLinetoAbs interface corresponds to an "absolute lineto" (L) path data command. 
interfaceSVGPathSegLinetoAbs: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); };
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.6 Interface SVGPathSegLinetoRel

The SVGPathSegLinetoRel interface corresponds to a "relative lineto" (l) path data command. 
interfaceSVGPathSegLinetoRel: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); };
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.7 Interface SVGPathSegCurvetoCubicAbs

The SVGPathSegCurvetoCubicAbs interface corresponds to an "absolute cubic Bézier curveto" (C) path data command. 
interfaceSVGPathSegCurvetoCubicAbs: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float x1 setraises(DOMException); attribute float y1 setraises(DOMException); attribute float x2 setraises(DOMException); attribute float y2 setraises(DOMException); };
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x1 (float)
The absolute X coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y1 (float)
The absolute Y coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x2 (float)
The absolute X coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y2 (float)
The absolute Y coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.8 Interface SVGPathSegCurvetoCubicRel

The SVGPathSegCurvetoCubicRel interface corresponds to a "relative cubic Bézier curveto" (c) path data command. 
interfaceSVGPathSegCurvetoCubicRel: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float x1 setraises(DOMException); attribute float y1 setraises(DOMException); attribute float x2 setraises(DOMException); attribute float y2 setraises(DOMException); };
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x1 (float)
The relative X coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y1 (float)
The relative Y coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x2 (float)
The relative X coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y2 (float)
The relative Y coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.9 Interface SVGPathSegCurvetoQuadraticAbs

The SVGPathSegCurvetoQuadraticAbs interface corresponds to an "absolute quadratic Bézier curveto" (Q) path data command. 
interfaceSVGPathSegCurvetoQuadraticAbs: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float x1 setraises(DOMException); attribute float y1 setraises(DOMException); };
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x1 (float)
The absolute X coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y1 (float)
The absolute Y coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.10 Interface SVGPathSegCurvetoQuadraticRel

The SVGPathSegCurvetoQuadraticRel interface corresponds to a "relative quadratic Bézier curveto" (q) path data command. 
interfaceSVGPathSegCurvetoQuadraticRel: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float x1 setraises(DOMException); attribute float y1 setraises(DOMException); };
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x1 (float)
The relative X coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y1 (float)
The relative Y coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.11 Interface SVGPathSegArcAbs

The SVGPathSegArcAbs interface corresponds to an "absolute arcto" (A) path data command. 
interfaceSVGPathSegArcAbs: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float r1 setraises(DOMException); attribute float r2 setraises(DOMException); attribute float angle setraises(DOMException); attribute boolean largeArcFlag setraises(DOMException); attribute boolean sweepFlag setraises(DOMException); };
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
r1 (float)
The x-axis radius for the ellipse (i.e., r1).
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
r2 (float)
The y-axis radius for the ellipse (i.e., r2).
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
angle (float)
The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
largeArcFlag (boolean)
The value of the large-arc-flag parameter.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
sweepFlag (boolean)
The value of the sweep-flag parameter.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.12 Interface SVGPathSegArcRel

The SVGPathSegArcRel interface corresponds to a "relative arcto" (a) path data command. 
interfaceSVGPathSegArcRel: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float r1 setraises(DOMException); attribute float r2 setraises(DOMException); attribute float angle setraises(DOMException); attribute boolean largeArcFlag setraises(DOMException); attribute boolean sweepFlag setraises(DOMException); };
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
r1 (float)
The x-axis radius for the ellipse (i.e., r1).
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
r2 (float)
The y-axis radius for the ellipse (i.e., r2).
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
angle (float)
The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
largeArcFlag (boolean)
The value of the large-arc-flag parameter.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
sweepFlag (boolean)
The value of the sweep-flag parameter.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.13 Interface SVGPathSegLinetoHorizontalAbs

The SVGPathSegLinetoHorizontalAbs interface corresponds to an "absolute horizontal lineto" (H) path data command. 
interfaceSVGPathSegLinetoHorizontalAbs: SVGPathSeg { attribute float x setraises(DOMException); };
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.14 Interface SVGPathSegLinetoHorizontalRel

The SVGPathSegLinetoHorizontalRel interface corresponds to a "relative horizontal lineto" (h) path data command. 
interfaceSVGPathSegLinetoHorizontalRel: SVGPathSeg { attribute float x setraises(DOMException); };
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.15 Interface SVGPathSegLinetoVerticalAbs

The SVGPathSegLinetoVerticalAbs interface corresponds to an "absolute vertical lineto" (V) path data command. 
interfaceSVGPathSegLinetoVerticalAbs: SVGPathSeg { attribute float y setraises(DOMException); };
Attributes:
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.16 Interface SVGPathSegLinetoVerticalRel

The SVGPathSegLinetoVerticalRel interface corresponds to a "relative vertical lineto" (v) path data command. 
interfaceSVGPathSegLinetoVerticalRel: SVGPathSeg { attribute float y setraises(DOMException); };
Attributes:
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.17 Interface SVGPathSegCurvetoCubicSmoothAbs

The SVGPathSegCurvetoCubicSmoothAbs interface corresponds to an "absolute smooth cubic curveto" (S) path data command. 
interfaceSVGPathSegCurvetoCubicSmoothAbs: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float x2 setraises(DOMException); attribute float y2 setraises(DOMException); };
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x2 (float)
The absolute X coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y2 (float)
The absolute Y coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.18 Interface SVGPathSegCurvetoCubicSmoothRel

The SVGPathSegCurvetoCubicSmoothRel interface corresponds to a "relative smooth cubic curveto" (s) path data command. 
interfaceSVGPathSegCurvetoCubicSmoothRel: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); attribute float x2 setraises(DOMException); attribute float y2 setraises(DOMException); };
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x2 (float)
The relative X coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y2 (float)
The relative Y coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.19 Interface SVGPathSegCurvetoQuadraticSmoothAbs

The SVGPathSegCurvetoQuadraticSmoothAbs interface corresponds to an "absolute smooth cubic curveto" (T) path data command. 
interfaceSVGPathSegCurvetoQuadraticSmoothAbs: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); };
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.20 Interface SVGPathSegCurvetoQuadraticSmoothRel

The SVGPathSegCurvetoQuadraticSmoothRel interface corresponds to a "relative smooth cubic curveto" (t) path data command. 
interfaceSVGPathSegCurvetoQuadraticSmoothRel: SVGPathSeg { attribute float x setraises(DOMException); attribute float y setraises(DOMException); };
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.21 Interface SVGPathSegList

This interface defines a list of SVGPathSeg objects.

SVGPathSegList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.

interfaceSVGPathSegList{ readonly attribute unsigned long numberOfItems; void clear() raises(DOMException); SVGPathSeg initialize(in SVGPathSeg newItem) raises(DOMException); SVGPathSeg getItem(in unsigned long index) raises(DOMException); SVGPathSeg insertItemBefore(in SVGPathSeg newItem, in unsigned long index) raises(DOMException); SVGPathSeg replaceItem(in SVGPathSeg newItem, in unsigned long index) raises(DOMException); SVGPathSeg removeItem(in unsigned long index) raises(DOMException); SVGPathSeg appendItem(in SVGPathSeg newItem) raises(DOMException); };
Attributes:
numberOfItems (readonly unsigned long)
The number of items in the list.
Operations:
void clear()
Clears all existing current items from the list, with the result being an empty list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
SVGPathSeg initialize(in SVGPathSeg newItem)
Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
Parameters
  1. SVGPathSeg newItem
    The item which should become the only member of the list.
Returns
The item being inserted into the list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
SVGPathSeg getItem(in unsigned long index)
Returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.
Parameters
  1. unsigned long index
    The index of the item from the list which is to be returned. The first item is number 0.
Returns
The selected item.
Exceptions
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGPathSeg insertItemBefore(in SVGPathSeg newItem, in unsigned long index)
Inserts a new item into the list at the specified position. The first item is number 0. If newItemis already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to insert before is beforethe removal of the item.
Parameters
  1. SVGPathSeg newItem
    The item which is to be inserted into the list.
  2. unsigned long index
    The index of the item before which the new item is to be inserted. The first item is number 0. If the index is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
SVGPathSeg replaceItem(in SVGPathSeg newItem, in unsigned long index)
Replaces an existing item in the list with a new item. If newItemis already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to replace is beforethe removal of the item.
Parameters
  1. SVGPathSeg newItem
    The item which is to be inserted into the list.
  2. unsigned long index
    The index of the item which is to be replaced. The first item is number 0.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGPathSeg removeItem(in unsigned long index)
Removes an existing item from the list.
Parameters
  1. unsigned long index
    The index of the item which is to be removed. The first item is number 0.
Returns
The removed item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGPathSeg appendItem(in SVGPathSeg newItem)
Inserts a new item at the end of the list. If newItemis already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
Parameters
  1. SVGPathSeg newItem
    The item which is to be inserted. The first item is number 0.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.

8.5.22 Interface SVGAnimatedPathData

The SVGAnimatedPathData interface supports elements which have a‘d’attribute which holds SVG path data, and supports the ability to animate that attribute.

The SVGAnimatedPathData interface provides two lists to access and modify the base (i.e., static) contents of the‘d’attribute:

  • DOM attribute pathSegList provides access to the static/base contents of the‘d’attribute in a form which matches one-for-one with SVG's syntax.
  • DOM attribute normalizedPathSegList provides normalized access to the static/base contents of the‘d’attribute where all path data commands are expressed in terms of the following subset of SVGPathSeg types: SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L), SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and SVG_PATHSEG_CLOSEPATH (z).

and two lists to access the current animated values of the‘d’attribute:

  • DOM attribute animatedPathSegList provides access to the current animated contents of the‘d’attribute in a form which matches one-for-one with SVG's syntax.
  • DOM attribute animatedNormalizedPathSegList provides normalized access to the current animated contents of the‘d’attribute where all path data commands are expressed in terms of the following subset of SVGPathSeg types: SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L), SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and SVG_PATHSEG_CLOSEPATH (z).

Each of the two lists are always kept synchronized. Modifications to one list will immediately cause the corresponding list to be modified. Modifications to normalizedPathSegList might cause entries in pathSegList to be broken into a set of normalized path segments.

Additionally, the‘d’attribute on the‘path’element accessed via the XML DOM (e.g., using thegetAttribute()method call) will reflect any changes made to pathSegList or normalizedPathSegList.

interfaceSVGAnimatedPathData{ readonly attribute SVGPathSegList pathSegList; readonly attribute SVGPathSegList normalizedPathSegList; readonly attribute SVGPathSegList animatedPathSegList; readonly attribute SVGPathSegList animatedNormalizedPathSegList; };
Attributes:
pathSegList (readonly SVGPathSegList)
Provides access to the base (i.e., static) contents of the ‘d’attribute in a form which matches one-for-one with SVG's syntax. Thus, if the ‘d’attribute has an "absolute moveto (M)" and an "absolute arcto (A)" command, then pathSegList will have two entries: a SVG_PATHSEG_MOVETO_ABS and a SVG_PATHSEG_ARC_ABS.
normalizedPathSegList (readonly SVGPathSegList)

Provides access to the base (i.e., static) contents of the‘d’attribute in a form where all path data commands are expressed in terms of the following subset of SVGPathSeg types: SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L), SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and SVG_PATHSEG_CLOSEPATH (z). Thus, if the‘d’attribute has an "absolute moveto (M)" and an "absolute arcto (A)" command, then pathSegList will have one SVG_PATHSEG_MOVETO_ABS entry followed by a series of SVG_PATHSEG_LINETO_ABS entries which approximate the arc. This alternate representation is available to provide a simpler interface to developers who would benefit from a more limited set of commands.

The only valid SVGPathSeg types are SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L), SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and SVG_PATHSEG_CLOSEPATH (z).

animatedPathSegList (readonly SVGPathSegList)
Provides access to the current animated contents of the ‘d’attribute in a form which matches one-for-one with SVG's syntax. If the given attribute or property is being animated, contains the current animated value of the attribute or property, and both the object itself and its contents are read only. If the given attribute or property is not currently being animated, contains the same value as pathSegList.
animatedNormalizedPathSegList (readonly SVGPathSegList)
Provides access to the current animated contents of the ‘d’attribute in a form where all path data commands are expressed in terms of the following subset of SVGPathSeg types: SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L), SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and SVG_PATHSEG_CLOSEPATH (z). If the given attribute or property is being animated, contains the current animated value of the attribute or property, and both the object itself and its contents are read only. If the given attribute or property is not currently being animated, contains the same value as normalizedPathSegList.

8.5.23 Interface SVGPathElement

The SVGPathElement interface corresponds to the ‘path’element. 
interfaceSVGPathElement: SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, SVGAnimatedPathData { readonly attribute SVGAnimatedNumber pathLength; float getTotalLength(); SVGPoint getPointAtLength(in float distance); unsigned long getPathSegAtLength(in float distance); SVGPathSegClosePath createSVGPathSegClosePath(); SVGPathSegMovetoAbs createSVGPathSegMovetoAbs(in float x, in float y); SVGPathSegMovetoRel createSVGPathSegMovetoRel(in float x, in float y); SVGPathSegLinetoAbs createSVGPathSegLinetoAbs(in float x, in float y); SVGPathSegLinetoRel createSVGPathSegLinetoRel(in float x, in float y); SVGPathSegCurvetoCubicAbs createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2); SVGPathSegCurvetoCubicRel createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2); SVGPathSegCurvetoQuadraticAbs createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1); SVGPathSegCurvetoQuadraticRel createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1); SVGPathSegArcAbs createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag); SVGPathSegArcRel createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag); SVGPathSegLinetoHorizontalAbs createSVGPathSegLinetoHorizontalAbs(in float x); SVGPathSegLinetoHorizontalRel createSVGPathSegLinetoHorizontalRel(in float x); SVGPathSegLinetoVerticalAbs createSVGPathSegLinetoVerticalAbs(in float y); SVGPathSegLinetoVerticalRel createSVGPathSegLinetoVerticalRel(in float y); SVGPathSegCurvetoCubicSmoothAbs createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2); SVGPathSegCurvetoCubicSmoothRel createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2); SVGPathSegCurvetoQuadraticSmoothAbs createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y); SVGPathSegCurvetoQuadraticSmoothRel createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y); };
Attributes:
pathLength (readonly SVGAnimatedNumber)
Corresponds to attribute pathLength on the given ‘path’element.
Operations:
float getTotalLength()
Returns the user agent's computed value for the total length of the path using the user agent's distance-along-a-path algorithm, as a distance in the current user coordinate system.
Returns
The total length of the path.
SVGPoint getPointAtLength(in float distance)
Returns the (x,y) coordinate in user space which is distanceunits along the path, utilizing the user agent's distance-along-a-path algorithm.
Parameters
  1. float distance
    The distance along the path, relative to the start of the path, as a distance in the current user coordinate system.
Returns
The returned point in user space.
unsigned long getPathSegAtLength(in float distance)
Returns the index into pathSegList which is distanceunits along the path, utilizing the user agent's distance-along-a-path algorithm.
Parameters
  1. float distance
    The distance along the path, relative to the start of the path, as a distance in the current user coordinate system.
Returns
The index of the path segment, where the first path segment is number 0.
SVGPathSegClosePath createSVGPathSegClosePath()
Returns a stand-alone, parentless SVGPathSegClosePath object.
Returns
A stand-alone, parentless SVGPathSegClosePath object.
SVGPathSegMovetoAbs createSVGPathSegMovetoAbs(in float x, in float y)
Returns a stand-alone, parentless SVGPathSegMovetoAbs object.
Parameters
  1. float x
    The absolute X coordinate for the end point of this path segment.
  2. float y
    The absolute Y coordinate for the end point of this path segment.
Returns
A stand-alone, parentless SVGPathSegMovetoAbs object.
SVGPathSegMovetoRel createSVGPathSegMovetoRel(in float x, in float y)
Returns a stand-alone, parentless SVGPathSegMovetoRel object.
Parameters
  1. float x
    The relative X coordinate for the end point of this path segment.
  2. float y
    The relative Y coordinate for the end point of this path segment.
Returns
A stand-alone, parentless SVGPathSegMovetoRel object.
SVGPathSegLinetoAbs createSVGPathSegLinetoAbs(in float x, in float y)
Returns a stand-alone, parentless SVGPathSegLinetoAbs object.
Parameters
  1. float x
    The absolute X coordinate for the end point of this path segment.
  2. float y
    The absolute Y coordinate for the end point of this path segment.
Returns
A stand-alone, parentless SVGPathSegLinetoAbs object.
SVGPathSegLinetoRel createSVGPathSegLinetoRel(in float x, in float y)
Returns a stand-alone, parentless SVGPathSegLinetoRel object.
Parameters
  1. float x
    The relative X coordinate for the end point of this path segment.
  2. float y
    The relative Y coordinate for the end point of this path segment.
Returns
A stand-alone, parentless SVGPathSegLinetoRel object.
SVGPathSegCurvetoCubicAbs createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2)
Returns a stand-alone, parentless SVGPathSegCurvetoCubicAbs object.
Parameters
  1. float x
    The absolute X coordinate for the end point of this path segment.
  2. float y
    The absolute Y coordinate for the end point of this path segment.
  3. float x1
    The absolute X coordinate for the first control point.
  4. float y1
    The absolute Y coordinate for the first control point.
  5. float x2
    The absolute X coordinate for the second control point.
  6. float y2
    The absolute Y coordinate for the second control point.
Returns
A stand-alone, parentless SVGPathSegCurvetoCubicAbs object.
SVGPathSegCurvetoCubicRel createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2)
Returns a stand-alone, parentless SVGPathSegCurvetoCubicRel object.
Parameters
  1. float x
    The relative X coordinate for the end point of this path segment.
  2. float y
    The relative Y coordinate for the end point of this path segment.
  3. float x1
    The relative X coordinate for the first control point.
  4. float y1
    The relative Y coordinate for the first control point.
  5. float x2
    The relative X coordinate for the second control point.
  6. float y2
    The relative Y coordinate for the second control point.
Returns
A stand-alone, parentless SVGPathSegCurvetoCubicRel object.
SVGPathSegCurvetoQuadraticAbs createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1)
Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticAbs object.
Parameters
  1. float x
    The absolute X coordinate for the end point of this path segment.
  2. float y
    The absolute Y coordinate for the end point of this path segment.
  3. float x1
    The absolute X coordinate for the first control point.
  4. float y1
    The absolute Y coordinate for the first control point.
Returns
A stand-alone, parentless SVGPathSegCurvetoQuadraticAbs object.
SVGPathSegCurvetoQuadraticRel createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1)
Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticRel object.
Parameters
  1. float x
    The relative X coordinate for the end point of this path segment.
  2. float y
    The relative Y coordinate for the end point of this path segment.
  3. float x1
    The relative X coordinate for the first control point.
  4. float y1
    The relative Y coordinate for the first control point.
Returns
A stand-alone, parentless SVGPathSegCurvetoQuadraticRel object.
SVGPathSegArcAbs createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)
Returns a stand-alone, parentless SVGPathSegArcAbs object.
Parameters
  1. float x
    The absolute X coordinate for the end point of this path segment.
  2. float y
    The absolute Y coordinate for the end point of this path segment.
  3. float r1
    The x-axis radius for the ellipse (i.e., r1).
  4. float r2
    The y-axis radius for the ellipse (i.e., r2).
  5. float angle
    The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.
  6. boolean largeArcFlag
    The value of the large-arc-flag parameter.
  7. boolean sweepFlag
    The value of the large-arc-flag parameter.
Returns
A stand-alone, parentless SVGPathSegArcAbs object.
SVGPathSegArcRel createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)
Returns a stand-alone, parentless SVGPathSegArcRel object.
Parameters
  1. float x
    The relative X coordinate for the end point of this path segment.
  2. float y
    The relative Y coordinate for the end point of this path segment.
  3. float r1
    The x-axis radius for the ellipse (i.e., r1).
  4. float r2
    The y-axis radius for the ellipse (i.e., r2).
  5. float angle
    The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.
  6. boolean largeArcFlag
    The value of the large-arc-flag parameter.
  7. boolean sweepFlag
    The value of the large-arc-flag parameter.
Returns
A stand-alone, parentless SVGPathSegArcRel object.
SVGPathSegLinetoHorizontalAbs createSVGPathSegLinetoHorizontalAbs(in float x)
Returns a stand-alone, parentless SVGPathSegLinetoHorizontalAbs object.
Parameters
  1. float x
    The absolute X coordinate for the end point of this path segment.
Returns
A stand-alone, parentless SVGPathSegLinetoHorizontalAbs object.
SVGPathSegLinetoHorizontalRel createSVGPathSegLinetoHorizontalRel(in float x)
Returns a stand-alone, parentless SVGPathSegLinetoHorizontalRel object.
Parameters
  1. float x
    The relative X coordinate for the end point of this path segment.
Returns
A stand-alone, parentless SVGPathSegLinetoHorizontalRel object.
SVGPathSegLinetoVerticalAbs createSVGPathSegLinetoVerticalAbs(in float y)
Returns a stand-alone, parentless SVGPathSegLinetoVerticalAbs object.
Parameters
  1. float y
    The absolute Y coordinate for the end point of this path segment.
Returns
A stand-alone, parentless SVGPathSegLinetoVerticalAbs object.
SVGPathSegLinetoVerticalRel createSVGPathSegLinetoVerticalRel(in float y)
Returns a stand-alone, parentless SVGPathSegLinetoVerticalRel object.
Parameters
  1. float y
    The relative Y coordinate for the end point of this path segment.
Returns
A stand-alone, parentless SVGPathSegLinetoVerticalRel object.
SVGPathSegCurvetoCubicSmoothAbs createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2)
Returns a stand-alone, parentless SVGPathSegCurvetoCubicSmoothAbs object.
Parameters
  1. float x
    The absolute X coordinate for the end point of this path segment.
  2. float y
    The absolute Y coordinate for the end point of this path segment.
  3. float x2
    The absolute X coordinate for the second control point.
  4. float y2
    The absolute Y coordinate for the second control point.
Returns
A stand-alone, parentless SVGPathSegCurvetoCubicSmoothAbs object.
SVGPathSegCurvetoCubicSmoothRel createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2)
Returns a stand-alone, parentless SVGPathSegCurvetoCubicSmoothRel object.
Parameters
  1. float x
    The relative X coordinate for the end point of this path segment.
  2. float y
    The relative Y coordinate for the end point of this path segment.
  3. float x2
    The relative X coordinate for the second control point.
  4. float y2
    The relative Y coordinate for the second control point.
Returns
A stand-alone, parentless SVGPathSegCurvetoCubicSmoothRel object.
SVGPathSegCurvetoQuadraticSmoothAbs createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y)
Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothAbs object.
Parameters
  1. float x
    The absolute X coordinate for the end point of this path segment.
  2. float y
    The absolute Y coordinate for the end point of this path segment.
Returns
A stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothAbs object.
SVGPathSegCurvetoQuadraticSmoothRel createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y)
Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothRel object.
Parameters
  1. float x
    The relative X coordinate for the end point of this path segment.
  2. float y
    The relative Y coordinate for the end point of this path segment.
Returns
A stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothRel object.
SVG 1.1 (Second Edition) – 16 August 2011Top ⋅ Contents ⋅ Previous ⋅ Next ⋅ Elements ⋅ Attributes ⋅ Properties
Article précédent： Article suivant：