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屬性