mask-origin-3-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>CSS Masking: mask-origin: mask positioning area</title>

    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">

    <link rel="author" title="Mozilla" href="https://www.mozilla.org">

    <style type="text/css">

      svg {

        position: absolute;

        top: 10px;

        border: 1px solid black;

    </style>

  </head>

  <body>

    <svg width="200" height="200" style="left: 10px;">

      <rect x="50" y="50" width="50" height="50" fill="blue"/>

    </svg>

    <svg width="200" height="200" style="left: 240px;">

      <rect x="50" y="50" width="50" height="50" fill="green"/>

      <rect x="60" y="60" width="40" height="40" fill="blue"/>

    </svg>

    <svg width="200" height="200" style="left: 10px; top: 220px;">

      <rect x="60" y="40" width="50" height="50" fill="green"/>

      <rect x="80" y="60" width="30" height="30" fill="blue"/>

    </svg>

  </body>

</html>