<svg width="600" height="200"> <!-- adapted from example opacity01 in SVG candidate recommendation 2 Aug 2000 --> <path style="fill:#008" d="M50 50 L50 150 550 150 550 50z"/> <g transform="translate(100,50)" style="opacity:1"> <path style="fill:#f00; opacity:1" d="M-30 0 L-10 20 10 0 -10 -20z"/> <path style="fill:#0f0; opacity:1" d="M-10 0 L10 20 30 0 10 -20z"/> </g> <g transform="translate(200,50)" style="opacity:0.5"> <path style="fill:#f00; opacity:1" d="M-30 0 L-10 20 10 0 -10 -20z"/> <path style="fill:#0f0; opacity:1" d="M-10 0 L10 20 30 0 10 -20z"/> </g> <g transform="translate(300,50)" style="opacity:1"> <path style="fill:#f00; opacity:0.5" d="M-30 0 L-10 20 10 0 -10 -20z"/> <path style="fill:#0f0; opacity:0.5" d="M-10 0 L10 20 30 0 10 -20z"/> </g> <g transform="translate(400,50)" style="opacity:0.5"> <path style="fill:#f00; opacity:0.5" d="M-30 0 L-10 20 10 0 -10 -20z"/> <path style="fill:#0f0; opacity:0.5" d="M-10 0 L10 20 30 0 10 -20z"/> </g> <g transform="translate(100,150)" style="opacity:1; stroke-width:5; stroke:#000"> <path style="fill:#f00; opacity:1" d="M-30 0 L-10 20 10 0 -10 -20z"/> <path style="fill:#0f0; opacity:1" d="M-10 0 L10 20 30 0 10 -20z"/> </g> <g transform="translate(200,150)" style="opacity:0.5; stroke-width:5; stroke:#000"> <path style="fill:#f00; opacity:1" d="M-30 0 L-10 20 10 0 -10 -20z"/> <path style="fill:#0f0; opacity:1" d="M-10 0 L10 20 30 0 10 -20z"/> </g> <g transform="translate(300,150)" style="opacity:1; stroke-width:5; stroke:#000"> <path style="fill:#f00; opacity:0.5" d="M-30 0 L-10 20 10 0 -10 -20z"/> <path style="fill:#0f0; opacity:0.5" d="M-10 0 L10 20 30 0 10 -20z"/> </g> <g transform="translate(400,150)" style="opacity:0.5; stroke-width:5; stroke:#000"> <path style="fill:#f00; opacity:0.5" d="M-30 0 L-10 20 10 0 -10 -20z"/> <path style="fill:#0f0; opacity:0.5" d="M-10 0 L10 20 30 0 10 -20z"/> </g> <g transform="translate(500,150)" style="opacity:1; stroke-width:5; stroke:#000"> <path style="fill:#f00; fill-opacity:0.5; stroke-opacity:0.5" d="M-30 0 L-10 20 10 0 -10 -20z"/> <path style="fill:#0f0; fill-opacity:0.5; stroke-opacity:0.5" d="M-10 0 L10 20 30 0 10 -20z"/> </g> </svg>