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

cx CSS-свойство задаёт центральную точку по оси x элемента SVG <circle> или <ellipse>. Если оно задано, то переопределяет атрибут cx элемента.

Синтаксис

/* length and percentage values */
cx: 20px;
cx: 20%;

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

Значения

Значения <length> и <percentage> обозначают горизонтальный центр круга или эллипса.

<length>

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

<percentage>

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

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

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

cx = 
  <length> |
  <percentage>

Примеры

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

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

HTML

Мы добавляем в SVG два одинаковых элемента <circle> и два одинаковых элемента <ellipse>; значения их атрибутов cx равны 50 и 150 соответственно.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" />
  <circle cx="50" cy="50" r="30" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
</svg>

CSS

С помощью CSS мы задаём стили только для первого круга и первого эллипса, поэтому их парные фигуры используют стили по умолчанию (при этом fill по умолчанию имеет чёрный цвет). Мы используем свойство cx, чтобы переопределить значение атрибута SVG cx, а также задаём ему fill и stroke, чтобы отличить первые фигуры в каждой паре от парных. По умолчанию браузер отображает изображения SVG шириной 300px и высотой 150px.

svg {
  border: 1px solid;
}

circle:first-of-type {
  cx: 30px;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cx: 180px;
  fill: pink;
  stroke: black;
}

Результат

Центр круга со стилями находится на расстоянии 30px от левого края области просмотра SVG, а стилизованный эллипс — на расстоянии 180px от этого края, как задано значениями CSS-свойства cx. Центры фигур без стилей находятся на расстоянии 50px и 150px от левого края области просмотра SVG, как задано значениями их атрибутов SVG cx.

Координаты по оси x в процентных значениях

В этом примере показано использование процентных значений для cx.

HTML

Мы используем ту же разметку, что и в предыдущем примере.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" />
  <circle cx="50" cy="50" r="30" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
</svg>

CSS

Мы используем CSS, похожий на CSS из предыдущего примера. Единственное отличие — значение CSS-свойства cx: в этом случае для <circle> мы используем процентное значение 30%, а для <ellipse> — 80%.

svg {
  border: 1px solid;
}

circle:first-of-type {
  cx: 30%;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cx: 80%;
  fill: pink;
  stroke: black;
}

Результат

При использовании процентных значений для cx они отсчитываются от ширины области просмотра SVG. Здесь координаты центров круга и эллипса со стилями по оси x составляют 30% и 80% ширины текущей области просмотра SVG соответственно. Поскольку ширина по умолчанию равна 300px, значения cx составляют 90px и 240px от левого края области просмотра SVG.

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

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

См. также

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