How to make SVG "fill" an action similar to CSS "background-size: cover"

Question

I am trying to create an SVG that masks an image with a specific path, however, when I try to fill an area using a template, the image does not cover the entire area.

Expected

Actual

In my defs I define a pattern:

 <pattern id="image" patternUnits="userSpaceOnUse" width="83.38" height="100" x="0" y="0"> <image xlink:href="http://goo.gl/kVVuy1" x="0" y="0" width="100%" height="100%" /> </pattern> 

and form:

 <path id="shape" d="M80.4,0c0,33.3,0,66.7,0,100c-26.8,0-53.6,0-80.4,0c0,0,0-0.1,0-0.1 c3.3-12.3,6.5-24.6,9.8-37c0.9-21,1.9-41.9,2.8-62.9C35.2,0,57.8,0,80.4,0z" /> 

then I include the form:

 <use xlink:href="#shape" fill="url(#image)"></use> 

The image I'm using is a dynamic resource (user uploaded), however, if necessary, I can get the dimensions.

Any solution that helps solve this problem will help, I tried using image with a mask, but no luck. As long as the blue background chart is shown and the red one is gone, my problem should be solved.

Here is a working example: http://codepen.io/Godwin/pen/hazqA

Answer 1

To fix this, add the corresponding preserveAspectRatio <image> attribute in the <pattern> to indicate that you want the image to be enlarged and cropped.

 <pattern id="image" patternUnits="userSpaceOnUse" width="83.38" height="100" x="0" y="0"> <image xlink:href="http://goo.gl/kVVuy1" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMinYMin slice"/> </pattern> 

Demo here

Answer 2

If background-position is required, as well as background-size: cover;

preserveAspectRatio="xMidYMid slice" // Center the image

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

All parameters