filter-in-mask.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html style lang=en>

<meta charset=utf-8>

</head>

<body>

    <svg viewBox="0 0 225 23" xmlns=http://www.w3.org/2000/svg>

        <style>.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}</style>

        <defs>

            <filter filterUnits=userSpaceOnUse height=22.9 id=Adobe_OpacityMaskFilter_3_ width=27 x=14 y=0>

                <fecolormatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></fecolormatrix>

            </filter>

        </defs>

        <mask height=22.9 id=mask-2_4_ maskUnits=userSpaceOnUse width=27 x=14 y=0>

            <g filter=url(#Adobe_OpacityMaskFilter_3_)>

                <path class=st1 d="M0 0h170V23H0z" id=path-1_4_></path>

            </g>

        </mask>

        <rect x=10 y=0 width=1000 height=100 fill=green></rect>

        <rect x=10 y=0 width=1000 height=100 mask=url(#mask-2_4_) fill=red></rect>

        <rect x=10 y=0 width=1000 height=6 fill=blue></rect>

    </svg>