transform-box-svg-3a.svg

Enable keyboard shortcuts

Checkerboard

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="none">

  <style>

    /* <![CDATA[ */

    .ref {

      fill: red;

    .test {

      fill: lime;

    /* ]]> */

  </style>

  <rect width="100%" height="100%" fill="lime"/>

  <!-- all rect.test rects should be covered by the corresponded rest.ref rect-->

  <!-- 1st row: transform-box only. -->

  <rect class="ref"

        x="11" y="11" width="8" height="8"/>

  <rect class="test"

        style="transform-box: view-box"

        x="10" y="10" width="10" height="10"/>

  <rect class="ref"

        x="26" y="11" width="8" height="8"/>

  <rect class="test"

        style="transform-box: fill-box"

        x="25" y="10" width="10" height="10"/>

  <rect class="ref"

        x="41" y="11" width="8" height="8"/>

  <rect class="test"

        style="transform-box: border-box"

        x="40" y="10" width="10" height="10"/>

  <!-- 2nd row: transform-box plus transform-origin. -->

  <rect class="ref"

        x="11" y="26" width="8" height="8"/>

  <rect class="test"

        style="transform-box: view-box; transform-origin: 40% 60%"

        x="10" y="25" width="10" height="10"/>

  <rect class="ref"

        x="26" y="26" width="8" height="8"/>

  <rect class="test"

        style="transform-box: fill-box; transform-origin: 20px 10px"

        x="25" y="25" width="10" height="10"/>

  <rect class="ref"

        x="41" y="26" width="8" height="8"/>

  <rect class="test"

        style="transform-box: border-box; transform-origin: 40% 60%"

        x="40" y="25" width="10" height="10"/>

  <!-- 3rd row: transform-box, transform-origin and transform. -->

  <rect class="ref"

        x="11" y="46" width="8" height="8"/>

  <rect class="test"

        style="transform-box: fill-box; transform-origin: 0% 0%; transform: scale(2);"

        x="10" y="45" width="5" height="5"/>

  <rect class="ref"

        x="26" y="46" width="8" height="8"/>

  <rect class="test"

        style="transform-box: fill-box; transform-origin: 50% 50%; transform:rotate(45deg);"

        x="24" y="44" width="12" height="12"/>

  <rect class="ref"

        x="41" y="46" width="8" height="8"/>

  <rect class="test"

        style="transform-box: border-box; transform-origin: 100% 100%; transform: scale(1);"

        x="40" y="45" width="10" height="10"/>

</svg>