| <svg xmlns="http://www.w3.org/2000/svg" width="350"> |
| <defs> |
| <clipPath id="clip1"> |
| <rect width="200" height="200"/> |
| </clipPath> |
| <clipPath id="clip2"> |
| <rect width="200" height="200"/> |
| <rect width="200" height="200"/> |
| </clipPath> |
| </defs> |
| <g> |
| <circle cx="50" cy="50" r="50" fill="green"/> |
| <circle cx="100" cy="50" r="50" fill="red" /> |
| <g clip-path="url(#clip1)" opacity=".5"> |
| <circle cx="50" cy="100" r="50" fill="green"/> |
| <circle cx="100" cy="100" r="50" fill="red" /> |
| </g> |
| </g> |
| <g transform="translate(200,0)"> |
| <circle cx="50" cy="50" r="50" fill="green"/> |
| <circle cx="100" cy="50" r="50" fill="red" /> |
| <g clip-path="url(#clip2)" opacity=".5"> |
| <circle cx="50" cy="100" r="50" fill="green"/> |
| <circle cx="100" cy="100" r="50" fill="red" /> |
| </g> |
| </g> |
| </svg> |