viz:svg:opacity

Table of Contents

About

Transparency (opacity) can be applied by setting:

a RGB color with alpha,
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>

Rendered by WebCode

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>

Rendered by WebCode