shape-rendering

Свойство shape-rendering CSS даёт подсказки рендереру о том, какие компромиссы можно сделать при отрисовке фигур, таких как пути, окружности или прямоугольники. Оно влияет только на элементы <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline> и <rect>. Если явно объявлено, значение свойства CSS переопределяет любые значения атрибута элемента shape-rendering.

Синтаксис

shape-rendering: auto;
shape-rendering: crispEdges;
shape-rendering: geometricPrecision;
shape-rendering: optimizeSpeed;

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

Значения

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

auto: Это значение указывает пользовательским агентам на компромисс между скоростью, чёткостью краёв и геометрической точностью, при этом геометрическая точность имеет больший приоритет, чем скорость и чёткость краёв.
crispEdges: Это значение указывает пользовательскому агенту на приоритет контраста краёв над геометрической точностью или скоростью рендеринга. Конечный рендеринг, вероятно, пропустит такие методы, как сглаживание. Также он может скорректировать позиции и ширины линий для выравнивания краёв с пикселями устройства.
geometricPrecision: Это значение указывает пользовательскому агенту на приоритет геометрической точности над скоростью или чёткостью краёв. Конечный рендеринг может включать такие методы, как сглаживание.
optimizeSpeed: Это значение указывает пользовательскому агенту на приоритет скорости рендеринга над геометрической точностью или чёткостью краёв. Конечный рендеринг, вероятно, пропустит такие методы, как сглаживание.

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

Начальное значение	`auto`
Применимо к	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>` и `<rect>` элементам в `svg`
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

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

shape-rendering = 
  auto                |
  optimizeSpeed       |
  crispEdges          |
  geometricPrecision

Пример

Для демонстрации различных рендерингов мы создаём набор четырёх эллипсов одинакового размера и формы.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 120">
  <ellipse cx="50" cy="60" rx="40" ry="60" />
  <ellipse cx="150" cy="60" rx="40" ry="60" />
  <ellipse cx="250" cy="60" rx="40" ry="60" />
  <ellipse cx="350" cy="60" rx="40" ry="60" />
</svg>

Затем мы применяем четыре значения shape-rendering, по одному для каждого эллипса.

ellipse:nth-of-type(1) {
  shape-rendering: crispEdges;
}
ellipse:nth-of-type(2) {
  shape-rendering: geometricPrecision;
}
ellipse:nth-of-type(3) {
  shape-rendering: optimizeSpeed;
}
ellipse:nth-of-type(4) {
  shape-rendering: auto;
}

Результат отображается здесь. Первые и третьи эллипсы (считая слева направо) скорее всего покажут зубчатые края, в то время как второй должен иметь более плавный вид. Внешний вид четвёртого и последнего эллипса будет определяться конкретными компромиссами, сделанными используемым вами пользовательским агентом для просмотра примера.

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

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

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

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

См. также

Атрибут SVG shape-rendering

© 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/shape-rendering