shape-rendering

SVG内容的创建者可能想要提供一个关于在浏览器呈现<path>元素或基本形状时进行什么暗示。该shape-rendering属性提供了这些提示。

用法说明

分类	呈现属性
值	自动\| optimizeSpeed \| \| crispEdges \| geometricPrecision \| 继承
动画	是
规范性文件	SVG 1.1（第二版）

auto表示用户代理应该进行适当的权衡来平衡速度，边缘清晰度和几何精度，但是几何精度比速度和边缘清晰度更重要。

optimizeSpeed表示用户代理应该强调几何精度和边缘清晰的渲染速度。此选项有时会导致用户代理关闭形状消除锯齿。

crispEdges指示用户代理应尝试强调作品的清晰边缘与渲染速度和几何精度之间的对比度。为了获得清晰的边缘，用户代理可能会关闭所有线条和曲线的抗锯齿功能，或者可能仅对接近垂直或水平的直线关闭抗锯齿功能。此外，用户代理还可以调整行位置和线宽，以使边缘与设备像素对齐。

geometricPrecision 指示用户代理应强调几何精度高于速度和边缘清晰度。

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

shape-rendering: geometricPrecision:	shape-rendering: optimizeSpeed

Similarly, you can use css shape-rendering:

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

以下元素可以使用该shape-rendering属性

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18