textPath element | SVGTextPathElement object

Defines a path that text can be rendered along.

Scalable Vector Graphics: Text, Section 10.17.6

DOM Information

Inheritance Hierarchy

Node

Element

SVGElement

SVGTextContentElement

SVGTextPathElement

Members

The SVGTextPathElement object has these types of members:

Events
Methods
Properties

Events

The SVGTextPathElement object has these events.

Event	Description
onload	Occurs when the browser has fully parsed the element and all of its descendants.

Methods

The SVGTextPathElement object has these methods.

Method	Description
getCharNumAtPosition	Gets the index of the character that the glyph cell bounding box contains at the specified point.
getComputedTextLength	Returns the total sum of all advance values from rendering all characters within the given text element.
getEndPositionOfChar	Gets the current text position of the specified character after the character is rendered in the user coordinate system where the glyphs that correspond to the specified character are rendered.
getExtentOfChar	Gets a rectangle that defines the minimum and maximum x-coordinate and y-coordinate values in the user coordinate system where the glyphs that correspond to the specified character are rendered.
getNumberOfChars	Gets the total number of characters that are available for rendering within the current element.
getRotationOfChar	Gets the rotation value of the specified character, relative to the current user coordinate system where the glyphs that corresponding to the specified character are rendered.
getStartPositionOfChar	Gets the current text position of the specified character before the character is rendered in the user coordinate system where the glyphs that correspond to the specified character are rendered.
getSubStringLength	Calculates the total sum of all advance values from rendering the specified substring of the characters.
hasExtension	Determines if the specified extension is supported.
selectSubString	Selects the specified substring, just as if a user selected the substring interactively.

Properties

The SVGTextPathElement object has these properties.

Property	Description
baselineShift	Sets or retrieves a value that indicates how the dominant baseline should be repositioned relative to the dominant baseline of the parent text content element.
className	Gets the names of the classes that are assigned to this object.
dominantBaseline	Sets or retrieves a value that determines or redetermines a scaled-baseline table.
externalResourcesRequired	Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
fill	Sets or retrieves a value that indicates the color to paint the interior of the given graphical element.
fillOpacity	Sets or retrieves a value that specifies the opacity of the painting operation that is used to paint the interior of the current object.
fillRule	Sets or retrieves a value that indicates the algorithm that is to be used to determine what parts of the canvas are included inside the shape.
focusable	Determines if an element can acquire keyboard focus (that is, receive keyboard events) and be a target for field-to-field navigation actions (such as when a user presses the Tab key).
glyphOrientationHorizontal	Sets or retrieves a value that alters the orientation of a sequence of characters relative to an inline-progression-direction of horizontal.
glyphOrientationVertical	Sets or retrieves a value that alters the orientation of a sequence of characters relative to an inline-progression-direction of vertical.
href	Gets an `xlink:href` attribute of an element.
kerning	Gets or sets a value that indicates whether Internet Explorer should adjust inter-glyph spacing based on kerning tables that are included in the relevant font (that is, enable auto-kerning) or instead disable auto-kerning and set inter-character spacing to a specific length (typically zero).
lengthAdjust	Gets or sets the lengthAdjust attribute on the given element.
method	Gets the method attribute on the given textPath element.
ownerSVGElement	Gets the nearest ancestor svg element.
requiredExtensions	Gets a white space-delimited list of required language extensions.
requiredFeatures	Gets or sets a white space-delimited list of feature strings.
spacing	Gets the spacing attribute on the given textPath element.
startOffset	Gets the startOffset attribute on the given textPath element.
stroke	Sets or retrieves a value that indicates the color to paint along the outline of a given graphical element.
strokeDasharray	Sets or retrieves one or more values that indicate the pattern of dashes and gaps used to stroke paths.
strokeDashoffset	Sets or retrieves a value that specifies the distance into the dash pattern to start the dash.
strokeLinecap	Sets or retrieves a value that specifies the shape to be used at the end of open subpaths when they are stroked.
strokeLinejoin	Sets or retrieves a value that specifies the shape to be used at the corners of paths or basic shapes when they are stroked.
strokeMiterlimit	Sets or retrieves a value that indicates the limit on the ratio of the length of miter joins (as specified in the strokeLinejoin property).
strokeOpacity	Sets or retrieves a value that specifies the opacity of the painting operation that is used to stroke the current object.
strokeWidth	Sets or retrieves a value that specifies the width of the stroke on the current object.
style	Gets a style object.
systemLanguage	Gets or sets a comma-separated list of language names.
textLength	Gets or sets the textLength attribute on the given element.
viewportElement	Gets the element that established the current viewport.
xmlbase	Gets or sets the `base` attribute on the element.
xmllang	Gets or sets a value that specifies the language that is used in the contents and attribute values of an element.
xmlspace	Gets or sets a value that indicates whether white space is preserved in character data.

Standards information

Scalable Vector Graphics: Text, Section 10.17.6

Remarks

Note In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherit core HTML attributes, properties, events, methods, and styles.

In addition to text that is drawn in a straight line, you can also place text along the shape of a path element in SVG. To render a block of text along the shape of a path element, include the given text within a textPath element that includes an xlink:href attribute with an Internationalized Resource Identifier (IRI) reference to the path element.

Examples

In the following code example, the textPath element is used to define a path for text rendering. The same path is used in the path example. Copy this sample to a text file and save it with the .html file extension. Run it in Internet Explorer 9 to see the text on a path.

It should look like this:

JavaScript



<!DOCTYPE HTML>
<html>
	
  <head>
  </head>
	
  <body>
    <svg width="400" height="400">
      <defs>
        <path id="myTextPath" d="M 50,100 Q 150,50 250,100" />
      </defs>
      <text fill="steelblue" font-size="20">
        <textPath xlink:href="#myTextPath">Internet Explorer Forever!</textPath>
      </text>
    </svg>
  </body>
</html>