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 hat shape-rendering auch eine entsprechende CSS-Eigenschaft: shape-rendering. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

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>

Verwendungshinweise

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

auto: Dieser Wert bedeutet, 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 bedeutet, dass der Benutzeragent die Rendering-Geschwindigkeit gegenüber geometrischer Präzision und scharfen Kanten betonen soll. Diese Option kann dazu führen, dass der Benutzeragent das Anti-Aliasing von Formen deaktiviert.
crispEdges: Dieser Wert bedeutet, dass der Benutzeragent versuchen soll, den Kontrast zwischen sauberen Kanten der Grafik gegenüber Rendering-Geschwindigkeit und geometrischer Präzision zu betonen. Um scharfe Kanten zu erzielen, könnte der Benutzeragent das Anti-Aliasing für alle Linien und Kurven oder möglicherweise nur für fast vertikale oder horizontale gerade Linien deaktivieren. Außerdem könnte der Benutzeragent die Positionen und Breiten von Linien anpassen, um Kanten mit Gerätepixeln auszurichten.
geometricPrecision: Bedeutet, 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

Siehe auch

CSS shape-rendering-Eigenschaft