How to make SVG “fill” act in a similar way to CSS “background-size: cover”

Question

I\'m am trying to create an SVG which masks an image with a particular path however, when I try to fill the area using a pattern, the image does not cover the entire area.

Answer 1

If background-position is needed as well as background-size: cover;

preserveAspectRatio="xMidYMid slice" // Will center the image

This link has all options available for the preserveAspectRatio attribute. And can help with centering the image within the pattern

All Options