clipPath-css-transform.html

Enable keyboard shortcuts

<style>

#rec1 {

  transform: translate(15px,15px) scale(2,4);

#rec3 {

  transform: translate(100px,100px) scale(2,4);

#clipPath3 {

  transform: translate(100px,100px);

</style>

<svg style="width: 400px; height: 400px; border: 1px solid red">

  <defs>

    <clipPath id="clipPath1">

      <rect id="rec1" width="20px" height="10px" />

      <rect id="rec2" width="20px" height="10px" />

    </clipPath>

    <clipPath id="clipPath2">

      <rect id="rec3" width="20px" height="10px" />

    </clipPath>

    <clipPath id="clipPath3">

      <rect id="rec4" x="200px" y="200px" width="40px" height="40px" />

    </clipPath>

  </defs>

  <circle cx="25px" cy="25px" r="20px" fill="skyblue" clip-path="url(#clipPath1)" />

  <circle cx="125px" cy="125px" r="20px" fill="skyblue" clip-path="url(#clipPath2)" />

  <circle cx="225px" cy="225px" r="20px" fill="skyblue" clip-path="url(#clipPath3)" />

</svg>