El atributo de representación de formas le indica al renderizador las ventajas y desventajas que se deben realizar al renderizar formas como caminos, círculos o rectángulos. Solo tiene efecto en los siguientes elementos: <círculo>, <elipse>, <línea>, <ruta>, <polígono>, <polilínea> y <rect>.
Sintaxis:
shape-rendering = auto | optimizeSpeed | crispEdges
| geometricPrecision
Valores de atributo: el atributo de representación de forma acepta los valores mencionados anteriormente y descritos a continuación:
- auto: este valor permite que el agente de usuario tome una decisión automática para equilibrar la velocidad, tener bordes nítidos o tener una buena precisión geométrica. Cuando no se especifica nada, este valor actúa como valor predeterminado.
- optimizarVelocidad: este valor le permite al agente de usuario especificar que la forma se renderizará de manera que se enfatice la velocidad sobre la precisión geométrica o los bordes nítidos.
- crispEdges: este valor le permite al agente de usuario especificar que la forma se renderizará con énfasis en el contraste de los bordes limpios sobre la precisión geométrica o la velocidad.
- geometricPrecision: este valor permite que el agente de usuario especifique que la forma se representará con precisión geométrica en lugar de centrarse en la velocidad o los bordes nítidos.
Ejemplo 1: los ejemplos a continuación ilustran el uso del atributo de representación de forma utilizando el valor del atributo geometricPrecision .
HTML
<!DOCTYPE html> <html> <body> <div style="color: green; margin-left: 50px;"> <h1> GeeksforGeeks </h1> <svg viewBox="0 0 420 100" xmlns="http://www.w3.org/2000/svg"> <polygon points="26, 86 11.2, 40.4 50, 12.2 88.8, 40.4 74, 86" fill="green" shape-rendering="geometricPrecision" /> </svg> </div> </body> </html>
Producción:
Ejemplo 2: los ejemplos a continuación ilustran el uso del atributo de representación de formas utilizando el valor del atributo crispEdges .
HTML
<!DOCTYPE html> <html> <body> <div style="color: green; margin-left: 50px;"> <h1>GeeksforGeeks</h1> <svg viewBox="0 0 420 100" xmlns="http://www.w3.org/2000/svg"> <polygon points="26, 86 11.2, 40.4 50, 12.2 88.8, 40.4 74, 86" fill="green" shape-rendering="crispEdges" /> </svg> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA