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.

text

Overview Table

DOM Interface
SVGElement

Examples

In the following code example, the text element is used to create a text message in olive 36-point Impact type that reads" Internet Explorer Rocks". 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.

It should look like this:



<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <svg>
            <text x="50" y="50" font-family="Impact" font-size="36" fill="olive">
                SVG Rocks!
            </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.

The XML character data within the text element, along with relevant attributes and properties and character-to-glyph mapping tables within the font itself, define the glyphs to be rendered. The attributes and properties on the text element indicate the writing direction, font specification, and painting attributes. These items describe how to render characters.

Because text elements are rendered by using the same rendering methods as other graphics elements, all of the same coordinate system transformation, painting, clipping, and masking features that apply to shapes (such as paths and rectangles) also apply to text elements.

You can apply a gradient, pattern, clipping path, mask, or filter to text. When you apply one of these items to text and you use objectBoundingBox to specify a graphical effect relative to the object bounding box, the units for the object bounding box are computed relative to the entire text element in all cases, even when different effects are applied to different tSpan elements within the same text element.

The text element renders its first glyph (after bidirectionality reordering) at the initial current text position, which is established by the x and y attributes on the text element. (The attributes might be adjusted because of the value of the text-anchor property, the presence of a textPath element that contains the first character, or x, y, dx, or dy attributes on a tSpan, tref, or altGlyph element that contains the first character.) After the glyphs that corresponds to the given character are rendered, the current text position is updated for the next character. In the simplest case, the new current text position is the previous current text position plus the glyphs’ advance value (horizontal or vertical).

Standards information

Members

The SVGTextElement object has these events:

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

The SVGTextElement object has these methods:

  • getBBox: Gets the bounding box, in current user space, of the geometry of all contained graphics elements.
  • 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.
  • getCTM: Gets the transformation matrix that transforms from the current user units to the viewport coordinate system for the nearestViewportElement object.
  • 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.
  • getScreenCTM: Gets the transformation matrix from the current user units to the screen coordinate system.
  • 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.
  • getTransformToElement: Gets the transformation matrix that transforms from the user coordinate system on the current element to the user coordinate system on the specified target element.
  • hasExtension: Determines if the specified extension is supported.
  • selectSubString: Selects the specified substring, just as if a user selected the substring interactively.

The SVGTextElement object has these properties:

  • className: Gets the names of the classes that are assigned to this object.
  • clipPath: Sets or retrieves a reference to the SVG graphical object that will be used as the clipping path.
  • dominantBaseline: Sets or retrieves a value that determines or redetermines a scaled-baseline table.
  • dx: Gets the dx attribute on the given element.
  • dy: Gets the dy attribute on the given element.
  • externalResourcesRequired: Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
  • farthestViewportElement: Gets a value that represents the farthest ancestor svg 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.
  • 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 the user-agent 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.
  • mask: Sets or retrieves a value that indicates a SVG mask.
  • nearestViewportElement: Gets a value that indicates which element established the current viewport.
  • ownerSVGElement: Gets the nearest ancestor svg element.
  • pointerEvents: Sets or retrieves a value that specifies under what circumstances a given graphics element can be the target element for a pointer event in SVG.
  • requiredExtensions: Gets a white space-delimited list of required language extensions.
  • requiredFeatures: Gets or sets a white space-delimited list of feature strings.
  • rotate: Gets or sets the supplemental character rotation about the current text position.
  • 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.
  • transform: Gets the value of a transform attribute.
  • viewportElement: Gets the element that established the current viewport.
  • x: Gets or sets the x-coordinate value.
  • 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.
  • y: Gets or sets the y-coordinate value.

Attributions