SVGLinearGradientElement

In This Article

The SVGLinearGradientElement interface corresponds to the <linearGradient> element.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/SVGElement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="431" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGElement</text></a><polyline points="481,25  491,20  491,30  481,25" stroke="#D4DDE4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#D4DDE4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#D4DDE4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/SVGGradientElement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="391" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGGradientElement</text></a><polyline points="301,89  291,84  291,94  301,89" stroke="#D4DDE4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/SVGLinearGradientElement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="141" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGLinearGradientElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Properties

This interface also inherits properties from its parent, SVGGradientElement.

SVGLinearGradientElement.x1 Read only: An SVGAnimatedLength corresponding to the x1 attribute of the given <linearGradient> element.
SVGLinearGradientElement.y1 Read only: An SVGAnimatedLength corresponding to the y1 attribute of the given <linearGradient> element.
SVGLinearGradientElement.x2 Read only: An SVGAnimatedLength corresponding to the x2 attribute of the given <linearGradient> element.
SVGLinearGradientElement.y2 Read only: An SVGAnimatedLength corresponding to the y2 attribute of the given <linearGradient> element.

Methods

This interface doesn't implement any specific methods, but inherits methods from its parent interface, SVGGradientElement.

Specifications

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2 The definition of 'SVGLinearGradientElement' in that specification.	Candidate Recommendation	No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'SVGLinearGradientElement' in that specification.	Recommendation	Initial definition

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	?	(Yes)	?	?	?	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	No support	(Yes)	?	?	?	?

Document Tags and Contributors

Tags:

Contributors to this page: Sebastianz, abbycar, fscholz, kscarfone, Sheppy, pa7, Jeremie

Last updated by: Sebastianz, Feb 6, 2017, 4:38:36 AM