y

Свойство y CSS определяет координату по оси Y верхнего левого угла фигуры SVG <rect>, изображения <image>, области просмотра <foreignObject> и вложенной области просмотра <svg> относительно системы координат пользователя ближайшего <svg> предка. При наличии, оно переопределяет атрибут элемента y.

Примечание: Свойство y применяется только к элементам <rect>, <image>, <foreignObject> и <svg>, вложенным в <svg>. Оно не влияет на самые внешние элементы <svg> и не применяется к другим элементам SVG, а также к элементам и псевдоэлементам HTML.

Синтаксис

/* length and percentage values */
y: 10px;
y: 10%;

/* Global values */
y: inherit;
y: initial;
y: revert;
y: revert-layer;
y: unset;

Значения

Значения <length> и <percentage> обозначают положение координаты по оси Y верхнего левого угла элемента SVG.

<length>: Как абсолютная или относительная длина, она может быть выражена в любой единице, разрешённой типом данных CSS <length>.
<percentage>: Проценты относятся к высоте SVG viewBox, если объявлены, иначе процент относится к высоте текущей области просмотра SVG.

Формальное определение

Начальное значение	`0`
Применяется к	`<svg>`, `<rect>`, `<image>` и `<foreignobject>` элементам в `svg`
Наследуется	нет
Проценты	относятся к высоте текущей области просмотра SVG
Вычисленное значение	указанный процент или абсолютная длина
Тип анимации	по вычисленному типу значения

Формальный синтаксис

y = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Определение координат по оси Y фигур SVG

В этом примере показан базовый пример использования y, и как свойство CSS y имеет приоритет над атрибутом y.

HTML

Мы включаем четыре одинаковых элемента SVG <rect> ; значения их атрибутов x и y все 10, что означает, что четыре прямоугольника находятся в одном месте, 10px от верхнего левого угла области просмотра SVG.

<svg>
  <rect width="40" height="40" x="10" y="10" />
  <rect width="40" height="40" x="10" y="10" />
  <rect width="40" height="40" x="10" y="10" />
  <rect width="40" height="40" x="10" y="10" />
</svg>

CSS

Мы стилизуем все прямоугольники так, чтобы у них была чёрная граница и небольшая прозрачность, чтобы перекрывающиеся прямоугольники были видны. Мы предоставляем прямоугольнику разные значения fill и y.

svg {
  border: 1px solid;
}

rect {
  fill: none;
  stroke: black;
  opacity: 0.8;
}

rect:nth-of-type(2) {
  y: -20px;
  fill: red;
}

rect:nth-of-type(3) {
  y: 4em;
  fill: yellow;
}

rect:nth-of-type(4) {
  y: 60%;
  fill: orange;
}

Результаты

Верхние края прямоугольников находятся в 10 (из атрибута), -20px, 4em, и 60%, соответственно. Прямоугольник 40px в высоту, поэтому -20px помещает половину красного прямоугольника за пределы области просмотра. SVG 150px в высоту, поэтому верхняя сторона оранжевого прямоугольника находится в 90px от верха области просмотра SVG.

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # Y

Совместимость с браузерами

	Рабочий стол					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`y`	≤80	≤80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

Атрибут SVG y
Свойства геометрии: y, cx, cy, r, rx, ry, x, width, height
fill
stroke
paint-order
<basic-shape> тип данных

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/y