clipPath-css-transform-ref.html (786B)
1 <svg style="width: 400px; height: 400px; border: 1px solid red"> 2 <defs> 3 <clipPath id="clipPath1"> 4 <rect id="rec1" x="15px" y="15px" width="40px" height="40px" /> 5 <rect id="rec2" width="20px" height="10px" /> 6 </clipPath> 7 <clipPath id="clipPath2"> 8 <rect id="rec3" x="100px" y="100px" width="40px" height="40px" /> 9 </clipPath> 10 <clipPath id="clipPath3" transform="translate(100,100)"> 11 <rect id="rec4" x="200px" y="200px" width="40px" height="40px" /> 12 </clipPath> 13 </defs> 14 15 <circle cx="25px" cy="25px" r="20px" fill="skyblue" clip-path="url(#clipPath1)" /> 16 <circle cx="125px" cy="125px" r="20px" fill="skyblue" clip-path="url(#clipPath2)" /> 17 <circle cx="225px" cy="225px" r="20px" fill="skyblue" clip-path="url(#clipPath3)" /> 18 </svg>