line

< svg‎ | elements
Jump to: navigation, search

line

This article is In Progress.


W3C Recommendation

Summary

The line element creates a line segment interconnecting two points.


Overview Table

DOM Interface SVGLineElement


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxIEOperaSafari
Basic support
1.0
Yes
?
Unknown
9.0
Yes
8.0
Yes
3.0.4
Yes

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
3.0
Yes
1.0
Yes
?
none
?
Yes
3.0.4
Yes

Examples

View live exampleIn the following code example, the line element is used to draw a salmon-colored line.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" 	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<svg width="400" height="400">
  <line x1="50" y1="50" x2="150" y2="150" stroke="salmon" stroke-width="10" />
</svg>


Attributes

Global attributes

Specific attributes

DOM Interface

The following DOM interface properties & methods should be moved to a proper SVG DOM documentation (i.e. SVGLineElement et. al, see above). However, at the present time, the WebPlatform MediaWiki doesn't allow the necessary changes.

The SVGLineElement object has these events:

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

The SVGLineElement object has these methods:

  • getBBox: Gets the bounding box, in current user space, of the geometry of all contained graphics elements.
  • getCTM: Gets the transformation matrix that transforms from the current user units to the viewport coordinate system for the nearestViewportElement object.
  • getScreenCTM: Gets the transformation matrix from the current user units to the screen coordinate system.
  • 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.

The SVGLineElement 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.
  • 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).
  • marker: Sets or retrieves a value that specifies the marker symbol that is used for all vertices on the given path element or basic shape.
  • markerEnd: Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at the final vertex of a given path element or basic shape.
  • markerMid: Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at every other vertex (that is, every vertex except the first and last) of a given path element or basic shape.
  • markerStart: Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at the first vertex of a given path element or basic shape.
  • 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.
  • 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.
  • transform: Gets the value of a transform attribute.
  • viewportElement: Gets the element that established the current viewport.
  • x1: Gets or sets the x-coordinate for the start of a line.
  • x2: Gets or sets the x-coordinate for the end of a line.
  • 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.
  • y1: Gets or sets the y-coordinate for the start of a line.
  • y2: Gets or sets the y-coordinate for the end of a line.

Related specifications

Specification Status Related Changes
Scalable Vector Graphics: Basic Shapes W3C Recommendation

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]