title element | SVGTitleElement object

Defines the title of an element.

Scalable Vector Graphics: Document Structure, Section 5.11.6

DOM Information

Inheritance Hierarchy

Node

Element

SVGElement

SVGTitleElement

Members

The SVGTitleElement object has these types of members:

Properties

Properties

The SVGTitleElement object has these properties.

Property	Description
className	Gets the names of the classes that are assigned to this object.
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).
ownerSVGElement	Gets the nearest ancestor svg element.
style	Gets a style object.
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: Document Structure, Section 5.11.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.

Each container element or graphics element in a Scalable Vector Graphics (SVG) drawing can provide a desc or a title textual description. The title elements are not rendered as part of the graphics. Instead, they appear as a tooltip as the the pointer moves over particular elements in the drawing.

Examples

In the following code example, a title element is provided for an ellipse. When you hover over the ellipse, a tooltip may be displayed. Copy this sample to a text file and save it with the .html file extension. Run it in Internet Explorer 9 to see the greenyellow ellipse.

The ellipse will look like this:

JavaScript



<!DOCTYPE HTML>
<html>
	
  <head>
  </head>
	
  <body>
    <svg width="400" height="400">
      <ellipse cx="150" cy="100" rx="100" ry="75" fill="greenyellow">
        <title>This is the title of an ellipse.</title>
      </ellipse>
    </svg>
  </body>
</html>