shape-rendering
shape-rendering 属性为渲染器提供了有关在渲染路径、圆形或矩形等形状时应如何权衡的提示。
注意： 作为一个呈现属性，shape-rendering 还有一个对应的 CSS 属性：shape-rendering。当两者都被指定时，CSS 属性具有更高的优先级。
你可以将此属性与以下 SVG 元素一起使用
示例
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-
表示用户代理应优先考虑几何精度而非速度和清晰的边缘。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # ShapeRendering |
浏览器兼容性
加载中…
另见
- CSS
shape-rendering属性