filter-in-mask.html (933B)
1 <!DOCTYPE html> 2 <html style lang=en> 3 <meta charset=utf-8> 4 </head> 5 <body> 6 <svg viewBox="0 0 225 23" xmlns=http://www.w3.org/2000/svg> 7 <style>.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}</style> 8 <defs> 9 <filter filterUnits=userSpaceOnUse height=22.9 id=Adobe_OpacityMaskFilter_3_ width=27 x=14 y=0> 10 <fecolormatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></fecolormatrix> 11 </filter> 12 </defs> 13 <mask height=22.9 id=mask-2_4_ maskUnits=userSpaceOnUse width=27 x=14 y=0> 14 <g filter=url(#Adobe_OpacityMaskFilter_3_)> 15 <path class=st1 d="M0 0h170V23H0z" id=path-1_4_></path> 16 </g> 17 </mask> 18 <rect x=10 y=0 width=1000 height=100 fill=green></rect> 19 <rect x=10 y=0 width=1000 height=100 mask=url(#mask-2_4_) fill=red></rect> 20 <rect x=10 y=0 width=1000 height=6 fill=blue></rect> 21 </svg>