shape-rendering

shape-rendering 屬性為渲染器提供了一些提示，關於在渲染形狀（如路徑、圓形或矩形）時應做出哪些權衡。

注意：作為呈現屬性，shape-rendering 可用作 CSS 屬性。有關更多資訊，請參閱 shape-rendering。

您可以將此屬性與以下 SVG 元素一起使用

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" shape-rendering="geometricPrecision" />
  <circle cx="320" cy="100" r="100" shape-rendering="crispEdges" />
</svg>

用法說明

值	`auto` \| `optimizeSpeed` \| `crispEdges` \| `geometricPrecision`
預設值	`auto`
可動畫	離散的

auto: 此值表示使用者代理應進行適當的權衡以平衡速度、清晰邊緣和幾何精度，但應將幾何精度放在比速度和清晰邊緣更重要的位置。
optimizeSpeed: 此值表示使用者代理應強調渲染速度而不是幾何精度和清晰邊緣。此選項有時會導致使用者代理關閉形狀抗鋸齒。
crispEdges: 此值表示使用者代理應嘗試強調藝術品清晰邊緣之間的對比，而不是渲染速度和幾何精度。為了獲得清晰的邊緣，使用者代理可能會關閉所有線條和曲線的抗鋸齒，或者可能只關閉接近垂直或水平的直線的抗鋸齒。此外，使用者代理可能會調整線條位置和線條寬度以使邊緣與裝置畫素對齊。
geometricPrecision: 表示使用者代理應強調幾何精度而不是速度和清晰邊緣。

規範

規範
可縮放向量圖形 (SVG) 2 # ShapeRendering

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱

CSS shape-rendering 屬性