`x` CSS-свойство

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

Синтаксис

/* length and percentage values */
x: 40px;
x: 40%;

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

Значения

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

<length>

В качестве абсолютной или относительной длины значение может быть задано в любой единице измерения, допустимой для типа данных CSS <length>.

<percentage>

Проценты отсчитываются от ширины области просмотра SVG viewBox, если она задана; в противном случае проценты отсчитываются от ширины текущей области просмотра SVG.

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

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

x = 
  <length> |
  <percentage>

Примеры

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

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

HTML

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

<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" x="10" y="10" />
  <rect width="100" height="100" x="10" y="10" />
  <rect width="100" height="100" x="10" y="10" />
  <rect width="100" height="100" x="10" y="10" />
</svg>

CSS

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

svg {
  border: 1px solid;
  width: 300px;
}

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

rect:nth-of-type(2) {
  x: 3em;
  fill: red;
}

rect:nth-of-type(3) {
  x: 180px;
  fill: yellow;
}

rect:nth-of-type(4) {
  x: 50%;
  fill: orange;
}

Результаты

Левые края прямоугольников находятся на отметках 10 (значение атрибута), 3em, 180px и 50% соответственно. Ширина SVG составляет 300px, поэтому левый край последнего прямоугольника находится на отметке 150px.

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

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

См. также

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