| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250"> |
| <!-- You should see 4 rects with the same size, filled with green and a fill opacity of 0.5 --> |
| <defs> |
| <mask id="mask1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" x="10" y="10" width="100" height="100"> |
| <rect x="60" y="60" width="20%" height="50" fill-opacity="0.5" fill="white"/> |
| </mask> |
| <mask id="mask2" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> |
| <rect x="0.5" y="0.2%" width="50%" height="0.5" fill-opacity="0.5" fill="white"/> |
| </mask> |
| <mask id="mask3" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse" y="50%"> |
| <rect x="24%" y="170" width="20%" height="50" fill-opacity="0.5" fill="white"/> |
| </mask> |
| <mask id="mask4" maskUnits="userSpaceOnUse" maskContentUnits="objectBoundingBox" x="120" y="120" width="100" height="100"> |
| <rect x="0.5" y="0.2%" width="0.5" height="0.2%" fill-opacity="0.5" fill="white"/> |
| </mask> |
| </defs> |
| <rect x="10" y="10" width="100" height="100" fill="green" mask="url(#mask1)"/> |
| <rect x="120" y="10" width="100" height="100" fill="green" mask="url(#mask2)"/> |
| <rect x="10" y="120" width="100" height="100" fill="green" mask="url(#mask3)"/> |
| <rect x="120" y="120" width="100" height="100" fill="green" mask="url(#mask4)"/> |
| </svg> |
| |
