| <!DOCTYPE html> |
| <html> |
| <body> |
| <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)"> |
| <circle cx="50" cy="100" r="50" fill="green" opacity=".5" /> |
| <circle cx="100" cy="100" r="50" fill="red" opacity=".5" /> |
| </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)"> |
| <circle cx="50" cy="100" r="50" fill="green" opacity=".5" /> |
| <circle cx="100" cy="100" r="50" fill="red" opacity=".5" /> |
| </g> |
| </g> |
| </svg> |
| </body> |
| </html> |
