shape-rendering

shape-rendering 属性为渲染器提供了一些提示，关于在渲染形状（如路径、圆形或矩形）时应做出哪些权衡。

注意：作为呈现属性，shape-rendering 可用作 CSS 属性。有关更多信息，请参阅 shape-rendering。

您可以将此属性与以下 SVG 元素一起使用

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" shape-rendering="geometricPrecision" />
  <circle cx="320" cy="100" r="100" shape-rendering="crispEdges" />
</svg>

用法说明

值	`auto` \| `optimizeSpeed` \| `crispEdges` \| `geometricPrecision`
默认值	`auto`
可动画	离散的

auto: 此值表示用户代理应进行适当的权衡以平衡速度、清晰边缘和几何精度，但应将几何精度放在比速度和清晰边缘更重要的位置。
optimizeSpeed: 此值表示用户代理应强调渲染速度而不是几何精度和清晰边缘。此选项有时会导致用户代理关闭形状抗锯齿。
crispEdges: 此值表示用户代理应尝试强调艺术品清晰边缘之间的对比，而不是渲染速度和几何精度。为了获得清晰的边缘，用户代理可能会关闭所有线条和曲线的抗锯齿，或者可能只关闭接近垂直或水平的直线的抗锯齿。此外，用户代理可能会调整线条位置和线条宽度以使边缘与设备像素对齐。
geometricPrecision: 表示用户代理应强调几何精度而不是速度和清晰边缘。

规范

规范
可缩放矢量图形 (SVG) 2 # ShapeRendering

浏览器兼容性

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

另请参阅

CSS shape-rendering 属性