| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <style> |
| * {padding: 0; margin: 0} |
| #d { |
| width: 180px; |
| height: 180px; |
| border: 1px solid black; |
| background-color: red; |
| } |
| #clip { |
| width: 160px; |
| height: 160px; |
| margin: 10px; |
| background-color: green; |
| -webkit-clip-path: url(#c2); |
| } |
| #clip-ref { |
| width: 32px; |
| height: 32px; |
| margin: 74px; |
| background-color: green; |
| } |
| svg { display: block; } |
| </style> |
| </head> |
| <body> |
| <svg height="100" width="100"> |
| <clipPath id="c2" clipPathUnits="userSpaceOnUse"> |
| <rect x="64" y="64" width="32" height="32"/> |
| </clipPath> |
| </svg> |
| <div id="d"><div id="clip"></div></div> |
| </body> |
| </html> |
