SVG stroke-opacity Attribute
Last Updated :
31 Mar, 2022
The stroke-opacity attribute specifies the transparency of an object or of a group of objects.
Syntax:
stroke-opacity= "opacity"
Attribute Values:
- decimal: decimal value ranging from 0-1
- percentage: percentage at which we want to set the opacity of the element
We will use the stoke-opacity attribute for setting the opacity of the element.
Example 1: In this example we will use the stroke-opacity attribute for setting the opacity of circle element using decimal attribute.
<!DOCTYPE html>
< html >
< body >
< svg viewBox = "0 0 40 10"
< 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 >
|
Output:
Example 2: In this example we will use the stroke-opacity attribute for setting the opacity of circle element using percentage attribute.
<!DOCTYPE html>
< html >
< body >
< svg viewBox = "0 0 40 35"
< circle cx = "5" cy = "5" r = "3" stroke = "green" />
< circle cx = "15" cy = "5" r = "3" stroke = "green"
stroke-opacity = "50%" />
</ svg >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...