MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

shape-rendering

« SVG 属性参考主页

指定SVG元素<path>的渲染模式。

使用参考

类型 外观属性
auto | optimizeSpeed | crispEdges | geometricPrecision | inherit
可运动 Yes
标准文档 SVG 1.1 (2nd Edition)
auto
让浏览器自动权衡渲染速度、平滑度、精确度。默认是倾向于精确度而非平滑度和速度。
optimizeSpeed
偏向渲染速度,浏览器会关闭反锯齿模式。(速度)
crispEdges
偏向更加清晰锐利的边缘的渲染。浏览器在渲染的时候会关闭反锯齿模式,且会让线条的位置和宽度和显示器边缘对齐。(锐度)
geometricPrecision
偏向渲染平滑的曲线。(平滑)

示例

<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="100"
  shape-rendering="optimizeSpeed"><!-- 这个示例在Firefox下看区别更明显 -->

shape-rendering: geometricPrecision:

shape-rendering:geometricPrecision

shape-rendering: optimizeSpeed

shape-rendering:optimizeSpeed

同样,你也可以在css样式中使用shape-rendering:

<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="100"
  style="shape-rendering:optimizeSpeed;">

关联元素

下面的元素可以使用这个属性

文档标签和贡献者

 此页面的贡献者: maicss
 最后编辑者: maicss,