<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<style> | |
#d { | |
position: absolute; | |
top: 20px; | |
left: 20px; | |
width: 180px; | |
height: 180px; | |
background-color: blue; | |
box-sizing: border-box; | |
zoom: 2; | |
} | |
#clip { | |
width: 160px; | |
height: 160px; | |
margin: 10px; | |
background-color: green; | |
clip-path: url(#c2); | |
} | |
</style> | |
</head> | |
<body> | |
<svg height="100" width="100"> | |
<clipPath id="c2" clipPathUnits="objectBoundingBox"> | |
<rect x="0.25" y="0.25" width="0.5" height="0.5"/> | |
</clipPath> | |
</svg> | |
<div id="d"><div id="clip"></div></div> | |
</body> | |
</html> |