x

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

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

Синтаксис

/* 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-области просмотра.

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

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

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

x = 
  <length-percentage>  

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

Примеры

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

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

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`x`	≤80	≤80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

Атрибут SVG x
Свойства геометрии: x, cx, cy, r, rx, ry, y, 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/x