旋转笔画但不填充 svg 圆

Question

我已关注this tuto，以便为我的 Vue 应用程序实现进度环。我还有一个额外的要求：用图像填充圆圈。这就是我已经达到的目的，使用模式（从我的浏览器复制粘贴，以避免增加 Vue 属性评估的额外复杂性）：

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%;
}

但是，我发现旋转圆圈显然也旋转了它的填充。

有什么办法可以解决这个问题吗？为什么示例旋转整个 SVG 以使圆形间隙在上方？

Codepen

Answer 1

您可以在 svg 中使用另一个圆圈。一个用于边框，一个用于背景。

https://codepen.io/anon/pen/EpPGzR

<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>

只旋转带边框的圆圈

.circle-border {
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}