33 lines
873 B
HTML
33 lines
873 B
HTML
<!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>
|