| <!DOCTYPE html> |
| <html> |
| <body> |
| <svg xmlns="http://www.w3.org/2000/svg" width="350"> |
| <g> |
| <circle cx="50" cy="50" r="50" fill="green"/> |
| <circle cx="100" cy="50" r="50" fill="red" /> |
| <g> |
| <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> |
| <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> |
