Inverting Svg Image Mask

In my application, it is more convenient for me to use an image to mask SVG shapes rather than the other way round. (The desired multi-color overlays effects can be achieved either

Solution 1:

You'll need to use a <filter> to invert the image in your mask.

<svgheight="500"xmlns:xlink="http://www.w3.org/1999/xlink" ><defs><filterid="invert"><feComponentTransfer><feFuncRtype="table"tableValues="1 0"/><feFuncGtype="table"tableValues="1 0"/><feFuncBtype="table"tableValues="1 0"/></feComponentTransfer></filter><maskid="image_mask"><imagewidth="194"height="240"xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Marilyn_Monroe_photo_pose_Seven_Year_Itch.jpg/194px-Marilyn_Monroe_photo_pose_Seven_Year_Itch.jpg"filter="url(#invert)"/></mask></defs><rectwidth="30"height="120"fill="red"mask="url(#image_mask)"/><rectx="30"width="164"height="240"fill="green"mask="url(#image_mask)"/></svg>