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

To fix this, add an appropriate preserveAspectRatio attribute to the in your to tell it that you want the image to be zoomed and sliced.

Demo here