filter-region-01b.html

Enable keyboard shortcuts

<!DOCTYPE html>

<body style="background-color: lime;">

<svg width="0" height="0">

  <filter id="myFilter" filterUnits="objectBoundingBox" x="0" y="0" width="50%" height="50%">

    <feMerge>

      <feMergeNode/>

    </feMerge>

  </filter>

</svg>

<svg style="position: fixed;" x="0" y ="0" width="400" height="400">

  <!-- This filtered inner element should be covered by the next outer svg element. -->

  <svg filter="url(#myFilter)" style="position: fixed;" x="0" y ="0" width="200" height="200">

    <rect x="10" y="10" width="120" height="120" fill="red"/>

  </svg>

</svg>

<svg style="position: fixed;" x="0" y ="0" width="120" height="120">

  <rect x="10" y="10" width="100" height="100" fill="lime"/>

</svg>

</body>