shape-rendering

**shape-rendering** CSS 属性提供有关渲染器在渲染路径、圆形或矩形等形状时应进行哪些权衡的提示。它只对 <circle>、<ellipse>、<line>、<path>、<polygon>、<polyline> 和 <rect> 元素有效。如果显式声明，CSS 属性的值将覆盖元素的 shape-rendering 属性的任何值。

语法

css

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

示例

为了展示不同的渲染效果，我们创建了一组四个大小和形状相同的椭圆。

html

<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 的四个值。

css

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) 2 # ShapeRendering

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

SVG shape-rendering 属性