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 显示在此处。第一个和第三个椭圆（从左到右计数）更有可能显示锯齿状边缘，而第二个应该具有更平滑的外观。第四个也是最后一个椭圆的外观将取决于您用于查看示例的用户代理所做的具体权衡。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # ShapeRendering |
浏览器兼容性
加载中…
另见
- SVG
shape-rendering属性