cx

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

<length>

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

<percentage>

Проценты относятся к ширине текущего SVG-вьюпорта.

cx = 
  <length-percentage>  

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

Этот пример демонстрирует базовое использование cx, и как свойство CSS cx имеет приоритет над атрибутом cx.

HTML

Мы включаем два идентичных элемента <circle> и два идентичных элемента <ellipse> в SVG; значения их атрибута 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.

Этот пример демонстрирует использование процентных значений для 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 cx; в этом случае мы используем процентные значения 30% для <circle> и 80% для <ellipse>.

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>