CSS-свойство `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

Это значение указывает пользовательскому агенту отдавать предпочтение скорости визуализации, а не геометрической точности или четкости краев. При итоговой визуализации, вероятно, будут пропущены такие методы, как сглаживание.

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

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

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;
}

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

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

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

См. также

• Атрибут SVG shape-rendering