This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

textPath

Overview Table

DOM Interface
SVGElement

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:



<!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>

Notes

Remarks

Note: In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherent 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.

Standards information

Members

The SVGTextPathElement object has these events:

  • onload: Occurs when the browser has fully parsed the element and all of its descendants.

The SVGTextPathElement object has these methods:

  • 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.

The SVGTextPathElement object has these properties:

  • 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).

Gets or sets a value that indicates whether Metro style app using JavaScript 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).

Attributions