The y2
attribute is used to specify the second y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the y
attribute instead.
Two elements are using this attribute: <line>
, and <linearGradient>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg>
For <line>
, y2
defines the y coordinate of the ending point of the line.
Value | <length> | <percentage> |
---|---|
Default value | 0 |
Animatable | Yes |
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg>
For <linearGradient>
, y2
defines the y coordinate of the ending point of the gradient vector used to map the gradient stop values. The exact behavior of this attribute is influenced by the gradientUnits
attributs
Value | <length> | <percentage> |
---|---|
Default value | 0% |
Animatable | Yes |
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- By default the gradient vector end at the top right corner of the bounding box of the shape it is applied to. --> <linearGradient y2="0%" id="g0"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </linearGradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- Here the gradient vector end at the bottom right corner of the bounding box of the shape it is applied to. --> <linearGradient y2="100%" id="g1"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </linearGradient> <rect x="11" y="1" width="8" height="8" fill="url(#g1)" /> </svg>
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of 'y2' in that specification. | Candidate Recommendation | Definition for <line>
|
Scalable Vector Graphics (SVG) 2 The definition of 'y2' in that specification. | Candidate Recommendation | Definition for <linearGradient>
|
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'y2' in that specification. | Recommendation | Initial definition for <line>
|
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'y2' in that specification. | Recommendation | Initial definition for <linearGradient>
|
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y2