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.

Das shape-rendering Attribut gibt dem Renderer Hinweise darauf, welche Kompromisse beim Rendern von Formen wie Pfaden, Kreisen oder Rechtecken eingegangen werden sollen.

Hinweis: Als Präsentationsattribut kann shape-rendering als CSS-Eigenschaft verwendet werden. Siehe shape-rendering für mehr Informationen.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

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>

Nutzungshinweise

Wert	`auto` \| `optimizeSpeed` \| `crispEdges` \| `geometricPrecision`
Standardwert	`auto`
Animierbar	diskret

auto: Dieser Wert gibt an, dass der Benutzeragent geeignete Kompromisse eingehen soll, um Geschwindigkeit, scharfe Kanten und geometrische Präzision auszugleichen, wobei der geometrischen Präzision mehr Bedeutung beigemessen wird als Geschwindigkeit und scharfen Kanten.
optimizeSpeed: Dieser Wert gibt an, dass der Benutzeragent die Rendergeschwindigkeit gegenüber geometrischer Präzision und scharfen Kanten betonen soll. Diese Option kann dazu führen, dass der Benutzeragent das Kantenglätten von Formen ausschaltet.
crispEdges: Dieser Wert gibt an, dass der Benutzeragent versuchen soll, den Kontrast zwischen sauberen Kanten von Kunstwerken gegenüber der Rendergeschwindigkeit und der geometrischen Präzision zu betonen. Um scharfe Kanten zu erreichen, kann der Benutzeragent das Kantenglätten für alle Linien und Kurven oder möglicherweise nur für nahezu vertikale oder horizontale Geraden ausschalten. Außerdem kann der Benutzeragent gegebenenfalls Linienpositionen und -breiten anpassen, um Kanten mit Gerätepixeln auszurichten.
geometricPrecision: Gibt an, dass der Benutzeragent die geometrische Präzision gegenüber Geschwindigkeit und scharfen Kanten betonen soll.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # ShapeRendering

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

CSS shape-rendering Eigenschaft