El atributo de efecto vectorial define el efecto vectorial que se utilizará al dibujar un objeto. Estos efectos se aplican antes de las operaciones de composición de filtros, máscaras y clips. Solo tiene efecto en <circle>, <elipse>, <foreignObject>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath> < elementos tspan> y <use> .
Nota: este efecto también se puede utilizar como propiedad CSS.
Sintaxis:
vector-effect = none | non-scaling-size | non-scaling-stroke
| fixed-position | non-rotation
Valores del Atributo: Este atributo acepta los valores mencionados anteriormente y descritos a continuación:
- none: Especifica que no se aplicará ningún efecto vectorial. Este es el valor predeterminado del atributo.
- non-scaling-stroke: Modifica la forma en que se traza un objeto. El ancho del trazo ya no depende de las transformaciones del elemento y del nivel de zoom.
- non-scaling-size: Especifica que la escala del sistema de coordenadas del usuario utilizado por el elemento y sus descendientes no cambia.
- non-rotation: Especifica que se suprimen la rotación y el sesgo del sistema de coordenadas del usuario utilizado por el elemento y sus descendientes.
- fixed-position: Especifica que la posición del sistema de coordenadas del usuario utilizado por el elemento y sus descendientes es fija.
Ejemplo 1: El siguiente ejemplo ilustra el uso del atributo de espacio entre palabras utilizando un valor de atributo de trazo sin escala .
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; font-size: 40px;"> GeeksforGeeks </h1> <svg viewBox="120 5 1200 940"> <path vector-effect="non-scaling-size" transform="translate(100,0)scale(4,1)" d="M10,20L40,100L39,200z" stroke="green" stroke-width="2px" fill="none"> </path> <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="M10,20L40,100L39,200z" stroke="green" stroke-width="2px" fill="none"> </path> </svg> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra el uso del atributo de espacio entre palabras utilizando un valor de atributo de tamaño sin escala .
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; text-align: center;"> GeeksforGeeks </h1> <div class="geeks" style="text-align: center;"> <!-- Here we have not applied vector-effect attribute --> <svg width="200" height="200" viewBox="0 0 50 50"> <circle cx="25" cy="25" r="20" fill="none" stroke="green" stroke-width="2" /> <path d="M25 15 L 25 35" fill="none" stroke="green" stroke-width="2" stroke-linecap="round" /> <path d="M15 25 L 35 25" fill="none" stroke="green" stroke-width="2" stroke-linecap="round" /> </svg> <!-- Here we have applied vector-effect attribute --> <svg width="200" height="200" viewBox="0 0 50 50"> <circle cx="25" cy="25" r="20" fill="none" stroke="green" stroke-width="2" vector-effect="non-scaling-stroke" /> <path d="M25 15 L 25 35" fill="none" stroke="green" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-size" /> <path d="M15 25 L 35 25" fill="none" stroke="green" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </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