<!DOCTYPE html>
<html>
    <body>
        <p>You should see two identical gray squares below</p>
        <svg width="600px" height="500px" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <filter id="flood" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
                    <feFlood flood-color="rgba(0, 0, 0, 0.4)"/>
                </filter>

                <filter id="flood-with-alpha" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
                    <feFlood flood-color="rgba(0, 0, 0, 0.8)" flood-opacity="0.5"/>
                </filter>
            </defs>
            <rect x="0" y="0" width="200" height="200" filter="url(#flood)"/>
            <rect x="0" y="250" width="200" height="200" filter="url(#flood-with-alpha)"/>
        </svg>
    </body>
</html>