Question

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

HTML

yarn add @types/http-status-codes

CSS

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

但是，我发现旋转圆圈显然也会旋转其填充。

有什么办法可以解决这个问题？为什么示例要旋转整个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%;
}

旋转笔划，但不填充svg圆

1 个答案: