Rotating the stroke but not the filling of a svg circle - css

Question

I've followed this tuto in order to implement a progress ring for my Vue application. I still have an extra requirement: fill the circle with an image. That's the point I've reached to, using a pattern (copy pasted from my browser in order to avoid adding the extra complexity of Vue property evaluations):
HTML
<div>
<svg
height="600"
width="600">
<defs>
<pattern id="service" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 100 100">
<image x="5" y="5" width="90" height="90" href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Selfie_icon.svg/2000px-Selfie_icon.svg.png"></image>
</pattern>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#f6921e"/>
<stop offset="100%" stop-color="#f6921e88"/>
</linearGradient>
</defs>
<circle
stroke="url(#gradient)"
stroke-dasharray="1709.0264035528476 1709.0264035528476"
style="stroke-dashoffset: 512.708;"
stroke-linecap="round"
stroke-width="14"
fill="url(#service)"
r="272"
cx="300"
cy="300"
/>
</svg>
</div>
CSS
circle {
transition: stroke-dashoffset 0.35s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
However, I find that rotating the circle obviously rotates its filling too.
Is there any way to overcome this problem? Why does the example rotate the entire SVG to make the circle gap be in the upside?
Codepen

Answer 1

You can use another circle in your SVG, one for the border and one for the background, then rotate just the circle with the border:
.circle-border {
transition: stroke-dashoffset 0.35s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div>
<svg height="600" width="600">
<defs>
<pattern id="service" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 100 100">
<image x="5" y="5" width="90" height="90" href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Selfie_icon.svg/2000px-Selfie_icon.svg.png"></image>
</pattern>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#f6921e"/>
<stop offset="100%" stop-color="#f6921e88"/>
</linearGradient>
</defs>
<circle
stroke="url(#gradient)"
stroke-dasharray="1709.0264035528476 1709.0264035528476"
style="stroke-dashoffset: 512.708;"
stroke-linecap="round"
stroke-width="14"
fill="transparent"
class="circle-border"
r="272"
cx="300"
cy="300"
/>
<circle
stroke-width="0"
fill="url(#service)"
class="circle-bg"
r="272"
cx="300"
cy="300"
/>
</svg>
</div>