El atributo de opacidad de trazo especifica la transparencia de un objeto o de un grupo de objetos.
Sintaxis:
stroke-opacity= "opacity"
Valores de atributos:
- decimal: valor decimal que va de 0-1
- porcentaje: porcentaje en el que queremos establecer la opacidad del elemento
Usaremos el atributo stoke-opacity para configurar la opacidad del elemento.
Ejemplo 1: En este ejemplo, usaremos el atributo de opacidad de trazo para configurar la opacidad del elemento circular usando el atributo decimal.
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4" stroke="green" /> <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" /> </svg> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, usaremos el atributo de opacidad de trazo para configurar la opacidad del elemento circular usando el atributo de porcentaje.
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 40 35" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="3" stroke="green" /> <circle cx="15" cy="5" r="3" stroke="green" stroke-opacity="50%" /> </svg> </body> </html>
Producción:
