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 Januar 2020.
Die shape-rendering-Eigenschaft von CSS gibt dem Renderer Hinweise darauf, welche Abwägungen beim Rendern von Formen wie Pfaden, Kreisen oder Rechtecken zu treffen sind. Sie hat nur Auswirkungen auf die Elemente <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline> und <rect>. Wenn ausdrücklich deklariert, überschreibt der Wert der CSS-Eigenschaft jegliche Werte des shape-rendering-Attributs des Elements.
Syntax
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;
Werte
Die Werte <length> und <percentage> bezeichnen das horizontale Zentrum des Kreises oder der Ellipse.
auto-
Dieser Wert weist die Benutzeragenten an, Abwägungen zu treffen, um eine Balance zwischen Geschwindigkeit, Kantenschärfe und geometrischer Präzision zu erreichen, wobei der geometrischen Präzision mehr Bedeutung beigemessen wird als der Geschwindigkeit und der Kantenschärfe.
crispEdges-
Dieser Wert weist den Benutzeragenten an, den Kontrast der Kanten gegenüber der geometrischen Präzision oder der Rendering-Geschwindigkeit zu betonen. Das endgültige Rendering wird wahrscheinlich auf Techniken wie Anti-Aliasing verzichten. Es kann auch die Positionen und Breiten der Linien anpassen, um die Kanten mit den Gerätepixeln auszurichten.
geometricPrecision-
Dieser Wert weist den Benutzeragenten an, die geometrische Präzision gegenüber Geschwindigkeit oder scharfen Kanten zu betonen. Das endgültige Rendering kann Techniken wie Anti-Aliasing umfassen.
optimizeSpeed-
Dieser Wert weist den Benutzeragenten an, die Rendereffizienz über die geometrische Präzision oder die Kantenschärfe zu betonen. Das endgültige Rendering wird wahrscheinlich auf Techniken wie Anti-Aliasing verzichten.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> elements in an svg |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
shape-rendering =
auto |
optimizeSpeed |
crispEdges |
geometricPrecision
Beispiel
Um die unterschiedlichen Renderings zu zeigen, erstellen wir eine Gruppe von vier Ellipsen gleicher Größe und Form.
<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>
Wir wenden dann die vier Werte von shape-rendering an, jeweils einen pro Ellipse.
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;
}
Das resultierende SVG wird hier gezeigt. Die erste und dritte Ellipse (von links nach rechts gezählt) zeigen eher gezackte Kanten, während die zweite ein glatteres Erscheinungsbild haben sollte. Das Erscheinungsbild der vierten und letzten Ellipse wird von den spezifischen Abwägungen bestimmt, die der Benutzeragent vornimmt, den Sie zur Ansicht des Beispiels verwenden.
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ShapeRendering |
Browser-Kompatibilität
Loading…
Siehe auch
- SVG
shape-rendering-Attribut