shape-rendering
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
指定 SVG 元素 <path>
的渲染模式。
使用参考
类型 | 外观属性 |
---|---|
值 | auto | optimizeSpeed | crispEdges | geometricPrecision | inherit |
可运动 | Yes |
- auto
-
让浏览器自动权衡渲染速度、平滑度、精确度。默认是倾向于精确度而非平滑度和速度。
- optimizeSpeed
-
偏向渲染速度,浏览器会关闭反锯齿模式。(速度)
- crispEdges
-
偏向更加清晰锐利的边缘的渲染。浏览器在渲染的时候会关闭反锯齿模式,且会让线条的位置和宽度和显示器边缘对齐。(锐度)
- geometricPrecision
-
偏向渲染平滑的曲线。(平滑)
示例
xml
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="100" height="100"
shape-rendering="optimizeSpeed"><!-- 这个示例在 Firefox 下看区别更明显 -->
shape-rendering: geometricPrecision: | shape-rendering: optimizeSpeed |
---|
同样,你也可以在 CSS 样式中使用 shape-rendering:
xml
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="100" height="100"
style="shape-rendering:optimizeSpeed;">
关联元素
下面的元素可以使用这个属性
规范
Specification |
---|
Scalable Vector Graphics (SVG) 2 # ShapeRendering |