SVG transform --> rotate only mask not fill url image - svg

Question

How to transform(rotate) only mask path and not the background image (image fill) ?
Right now I get this (image rotates along with svg transform):
https://postimg.org/image/5ifcpkco5/
My SVG below:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
<title>Text Pattern Fill Example</title>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://image.shutterstock.com/z/stock-photo-diverse-ethnic-diversity-ethnicity-community-concept-416173357.jpg" x="0" y="0" width="100" height="170"/><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
</pattern>
</defs>
<path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z" transform="translate(55.780723, 60.780723) rotate(-90.000000) translate(-55.780723, -60.780723) " fill="url(#img1)"></path>
</svg>

Answer 1

You could just rotate the <image> by the same amount in the other direction.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
<title>Text Pattern Fill Example</title>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://image.shutterstock.com/z/stock-photo-diverse-ethnic-diversity-ethnicity-community-concept-416173357.jpg" x="0" y="0" width="100" height="170"
transform="translate(55.780723, 60.780723) rotate(90.000000) translate(-55.780723, -60.780723)"
/><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
</pattern>
</defs>
<path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z" transform="translate(55.780723, 60.780723) rotate(-90.000000) translate(-55.780723, -60.780723) " fill="url(#img1)"></path>
</svg>
But you may find it easier to change the way you do the masking. Don't use a <pattern>, apply a <mask> to an <image> instead.

Answer 2

You can combine rotate and translate into 1 (it will run fast):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
<title>Text Pattern Fill Example</title>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://image.shutterstock.com/z/stock-photo-diverse-ethnic-diversity-ethnicity-community-concept-416173357.jpg" x="0" y="0" width="100" height="170"
transform="rotate(90.000000, 55.780723, 60.780723)"
/><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
</pattern>
</defs>
<path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z" transform="rotate(-90.000000, 55.780723, 60.780723) " fill="url(#img1)"></path>
</svg>