SVG - Opacity (Transparency or Alpha)

1 - About

Transparency (opacity) can be applied by setting:

3 - Example

3.1 - With Rgba

  • The stylesheet:

.myFirstBeautifulCircle  { fill: rgb(213,216,203); } /* #D5D8CB */
.mySecondBeautifulCircle { fill: rgba(236,220,198,0.6) /* #ECDCC6 is 60% opaque */


<svg height="120">
    <circle cx="60" cy="60" r="50" class="myFirstBeautifulCircle" />
    <circle cx="100" cy="60" r="50" class="mySecondBeautifulCircle" />
</svg>

3.2 - With the Opacity attribute

  • The stylesheet:

.myFirstBeautifulCircle  { 
             fill: rgb(213,216,203); /* #D5D8CB */
             } 
.mySecondBeautifulCircle { 
             fill: rgb(236,220,198); /* #ECDCC6 */
             opacity: 0.6} /* 60% opaque */


<svg height="120">
    <circle cx="60" cy="60" r="50" class="myFirstBeautifulCircle" />
    <circle cx="100" cy="60" r="50" class="mySecondBeautifulCircle" />
</svg>


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap