css - SVG逆时针

对于我正在从事的项目，我必须能够描述从-100％到100％的值。有什么办法可以让我采用现有的百分比圈（例如下面的百分比圈）并使进度指示器向后退-如逆时针方向一样？

<div class="flex-wrapper">

  <div class="single-chart">
    <svg viewbox="0 0 36 36" class="circular-chart orange">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="50, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">30%</text>
    </svg>
  </div>

</div>

CSS：

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.single-chart {
  width: 5%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 2.0;
}

.circle {
  fill: none;
  stroke-width: 2.0;
  stroke-linecap: square;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

@keyframes antiprogress {
  0% {
    stroke-dasharray: 0 100;
  }
}


.circular-chart.orange .circle {
  stroke: #f80;
}

.circular-chart.green .circle {
  stroke: #00c851;
}

.circular-chart.blue .circle {
  stroke: #33b5e5;
}

.circular-chart.blue .red {
  stroke: #ff3547;
}

.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

这是指向代码笔的链接：https://codepen.io/killia15/pen/zRqvxP

Image of Desired Output

最佳答案

更新：由于某些浏览器的兼容性，第一个答案似乎仅在chrome上有效，您可以在下面找到更合适的答案

您可以结合使用旋转。因此，如果您要-20％，则创建stroke-dasharray="20, 100"，然后应用以这种方式计算的负旋转= 360度的20％，在这种情况下为-72。然后添加到动画rotate(0)中以创建逆时针运动：

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.single-chart {
  width: 33%;
  justify-content: space-around;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 3.8;
  stroke-linecap: square;
  transform-origin:center;
  animation: progress 1s ease-out forwards;
}
.circle-anti {
  animation: antiprogress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

@keyframes antiprogress {
  0% {
    stroke-dasharray: 0 100;
    transform: rotate(0deg);
  }
}

.circular-chart.orange .circle {
  stroke: #f80;
}

.circular-chart.green .circle {
  stroke: #00c851;
}

.circular-chart.blue .circle {
  stroke: #33b5e5;
}

.circular-chart.blue .red {
  stroke: #ff3547;
}

.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

<div class="flex-wrapper">

  <div class="single-chart">
    <svg viewbox="0 0 36 36" class="circular-chart orange">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle circle-anti"
        stroke-dasharray="50, 100" style="transform:rotate(-180deg)"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">-50%</text>
    </svg>
  </div>

  <div class="single-chart">
    <svg viewbox="0 0 36 36" class="circular-chart green">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="60, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">60%</text>
    </svg>
  </div>

   <div class="single-chart">
    <svg viewbox="0 0 36 36" class="circular-chart green">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path style="transform:rotate(-72deg)" class="circle circle-anti"
        stroke-dasharray="20, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">-20%</text>
    </svg>
  </div>

</div>

更新

这是另一个更简单的想法，无需设置旋转动画。我只是使用scale(-1)来反转形状，因此它将移到左侧：

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.single-chart {
  width: 33%;
  justify-content: space-around;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 3.8;
  stroke-linecap: square;
  transform-origin:center;
  animation: progress 1s ease-out forwards;
}
.circle-anti {
  animation: antiprogress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

@keyframes antiprogress {
  0% {
    stroke-dasharray: 0 100;
    transform: rotate(0deg);
  }
}

.circular-chart.orange .circle {
  stroke: #f80;
}

.circular-chart.green .circle {
  stroke: #00c851;
}

.circular-chart.blue .circle {
  stroke: #33b5e5;
}

.circular-chart.blue .red {
  stroke: #ff3547;
}

.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

<div class="flex-wrapper">

  <div class="single-chart">
    <svg viewbox="0 0 36 36" class="circular-chart orange">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="50, 100" transform="scale(-1,1)"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">-50%</text>
    </svg>
  </div>

  <div class="single-chart">
    <svg viewbox="0 0 36 36" class="circular-chart green">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="60, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">60%</text>
    </svg>
  </div>

   <div class="single-chart">
    <svg viewbox="0 0 36 36" class="circular-chart green">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path transform="scale(-1,1)" class="circle"
        stroke-dasharray="20, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">-20%</text>
    </svg>
  </div>

</div>

关于css - SVG逆时针，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48601880/