Свойство CSS `y`

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

Синтаксис

/* 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.

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

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

y = 
  <length> |
  <percentage>

Примеры

Задание координат фигур SVG по оси y

В этом примере показано базовое применение свойства 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.

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

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

См. также

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