filter-region-01a.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>

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

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

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

</svg>

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

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

</svg>

</body>