SVG path background image autoscale with aspect-ratio - html

Question

I want to fill a path in my svg with a background image, that autoscales to fill the entire path while maintaining the aspect-ratio of the image, thus as if you'd use the css background-size: cover, I've managed to get this working with clipPath or making a pattern from the image (would also like to know which of these is the option with best browser support) but I can't get the auto scaling to use.
If anyone would have some tips or solutions I would appreciate.
Here's a jsfiddle with an example of what i've got to work.
https://jsfiddle.net/shd50cvt/
The svg:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="341.722px" height="267.549px" viewBox="0 0 341.722 267.549" style="enable-background:new 0 0 341.722 267.549;"
xml:space="preserve">
.st0{fill:#FF0000;}
.st1{fill: url(#pattern);}

Answer 1

In the pattern element, you can use patternUnits="objectBoundingBox" and x="0" and y="0" and width="1" and height="1" to auto scale a single pattern tile to the size of the path. You can use preserveAspectRatio="xMidYMid slice" to maintain the aspect ratio of the tile while covering the entire path. You may need to also set preserveAspectRatio on the image element in case the jpg size does not match the image element size.
Refer to the SVG reference for more information on patterns.
http://www.w3.org/TR/SVG/pservers.html#Patterns
I have modified your example to scale the image to fill the path.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="341.722px" height="267.549px" viewBox="0 0 341.722 267.549" style="enable-background:new 0 0 341.722 267.549;"
xml:space="preserve">
<pattern id="pattern" patternUnits="objectBoundingBox" preserveAspectRatio="xMidYMid slice"
x="0" y="0" width="1" height="1" viewbox="0 0 400 300">
<image xlink:href="https://static.pexels.com/photos/909/flowers-garden-colorful-colourful.jpg"
x="0" y="0" width="400" height="300" preserveAspectRatio="xMidYMid slice"/>
</pattern>
<style type="text/css">
.st0{fill:#FF0000;}
.st1{fill: url(#pattern);}
</style>
<path class="st1" d="M199.668,52.98c-17.815,0-32.711,12.454-36.484,29.128c23.783,3.473,43.093,20.685,49.641,43.322
c14.174-5.325,24.262-18.998,24.262-35.033C237.086,69.732,220.334,52.98,199.668,52.98z"/>
<circle class="st0" cx="154.305" cy="142.384" r="60.927"/>
</svg>