About
Transparency (opacity) can be applied by setting:
- or the opacity css attribute value.
Articles Related
Example
With Rgba
- The stylesheet:
.myFirstBeautifulCircle { fill: rgb(213,216,203); } /* #D5D8CB */
.mySecondBeautifulCircle { fill: rgba(236,220,198,0.6) /* #ECDCC6 is 60% opaque */
- The circle:
<svg height="120">
<circle cx="60" cy="60" r="50" class="myFirstBeautifulCircle" />
<circle cx="100" cy="60" r="50" class="mySecondBeautifulCircle" />
</svg>
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 */
- The circle:
<svg height="120">
<circle cx="60" cy="60" r="50" class="myFirstBeautifulCircle" />
<circle cx="100" cy="60" r="50" class="mySecondBeautifulCircle" />
</svg>