mask-origin-3-ref.html (971B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Masking: mask-origin: mask positioning area</title> 6 <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> 7 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 8 <style type="text/css"> 9 svg { 10 position: absolute; 11 top: 10px; 12 border: 1px solid black; 13 } 14 </style> 15 </head> 16 <body> 17 <svg width="200" height="200" style="left: 10px;"> 18 <rect x="50" y="50" width="50" height="50" fill="blue"/> 19 </svg> 20 <svg width="200" height="200" style="left: 240px;"> 21 <rect x="50" y="50" width="50" height="50" fill="green"/> 22 <rect x="60" y="60" width="40" height="40" fill="blue"/> 23 </svg> 24 <svg width="200" height="200" style="left: 10px; top: 220px;"> 25 <rect x="60" y="40" width="50" height="50" fill="green"/> 26 <rect x="80" y="60" width="30" height="30" fill="blue"/> 27 </svg> 28 </body> 29 </html>