shape-rendering
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La propriété CSS shape-rendering fournit des indications au moteur de rendu sur les compromis à effectuer lors du rendu de formes telles que des chemins, des cercles ou des rectangles.
Elle n'a d'effet que sur les éléments SVG <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline> et <rect>. Si elle est déclarée explicitement, la valeur de la propriété CSS remplace toute valeur de l'attribut shape-rendering de l'élément.
Syntaxe
shape-rendering: auto;
shape-rendering: crispEdges;
shape-rendering: geometricPrecision;
shape-rendering: optimizeSpeed;
/* Valeurs globales */
shape-rendering: inherit;
shape-rendering: initial;
shape-rendering: revert;
shape-rendering: revert-layer;
shape-rendering: unset;
Valeurs
Les valeurs de type <length> et <percentage> désignent le centre horizontal du cercle ou de l'ellipse.
auto-
Cette valeur indique aux agents utilisateurs de faire des compromis afin d'équilibrer la vitesse, la netteté des bords et la précision géométrique, en accordant plus d'importance à la précision géométrique qu'à la vitesse et à la netteté des bords.
crispEdges-
Cette valeur indique aux agents utilisateurs de privilégier le contraste des bords par rapport à la précision géométrique ou à la vitesse de rendu. Le rendu final est susceptible de ne pas utiliser des techniques telles que l'anticrénelage. Elle peut également ajuster les positions et les largeurs des lignes afin d'aligner les bords avec les pixels de l'appareil.
geometricPrecision-
Cette valeur indique aux agents utilisateurs de privilégier la précision géométrique par rapport à la vitesse ou à la netteté des bords. Le rendu final peut impliquer des techniques telles que l'anticrénelage.
optimizeSpeed-
Cette valeur indique aux agents utilisateurs de privilégier la vitesse de rendu par rapport à la précision géométrique ou à la netteté des bords. Le rendu final est susceptible de ne pas utiliser des techniques telles que l'anticrénelage.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | éléments <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline> et <rect> dans un svg |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
shape-rendering =
auto |
optimizeSpeed |
crispEdges |
geometricPrecision
Exemples
Pour montrer les différents rendus, nous créons un ensemble de quatre ellipses de taille et de forme égales.
<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>
Nous appliquons ensuite les quatre valeurs de shape-rendering, une par 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;
}
Le SVG résultant est montré ici. Les première et troisième ellipses (en comptant de gauche à droite) sont plus susceptibles de présenter des bords irréguliers, tandis que la deuxième devrait avoir une apparence plus lisse. L'apparence de la quatrième et dernière ellipse sera dictée par les compromis spécifiques effectués par l'agent utilisateur que vous utilisez pour visualiser l'exemple.
Spécifications
| Spécification |
|---|
| Scalable Vector Graphics (SVG) 2 # ShapeRendering |
Compatibilité des navigateurs
Voir aussi
- L'attribut SVG
shape-rendering