SVGLinearGradientElement: свойство y1
Базовая реализация Широко поддерживается
Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.
Свойство y1 только для чтения интерфейса SVGLinearGradientElement описывает координату на оси y начальной точки градиента в виде SVGAnimatedLength. Оно отражает вычисленное значение атрибута y1 элемента <linearGradient>.
Значение атрибута является <length>, <percentage> или <number>. Численное значение SVGAnimatedLength.baseVal представляет координату y точки начала градиента в системе пользовательских координат.
Значение
Объект SVGAnimatedLength.
Пример
Рассмотрим следующий SVG:
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient1" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stop-color="blue" />
<stop offset="100%" stop-color="white" />
</linearGradient>
<linearGradient id="gradient2" x1="25%" y1="0%" x2="75%" y2="100%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="yellow" />
</linearGradient>
</defs>
<rect x="0" y="0" width="200" height="100" fill="url(#gradient1)" />
<rect x="0" y="100" width="200" height="100" fill="url(#gradient2)" />
</svg>
Мы можем получить вычисленные значения атрибутов y1:
const linearGradients = document.querySelectorAll("linearGradient");
const y1Gradient1 = linearGradients[0].y1;
const y1Gradient2 = linearGradients[1].y1;
console.dir(y1Gradient1.baseVal.value); // output: 0 (0% of 200)
console.dir(y1Gradient2.baseVal.value); // output: 0 (0% of 200)
Спецификации
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
y1 |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGLinearGradientElement/y1
