使用SVG dashoffset / dasharray按360度的百分比绘制圆

Question

我以为我了解这是如何工作的，但百分比却不起作用。我必须镜像/旋转我的圆，因为它需要从中心顶部开始并逆时针旋转。示例here顺时针旋转。

它接近了，但是我想通过使用750 dashoffset来“画一个圆的25％”，而最初是1000 dasharray / dashoffset无效。大于25％

.parent {
  position: relative;
  transform: rotate(90deg) scaleX(-1); /* scale(1.5) */
  border: 1px solid red;
}

circle {
  fill: none;
  stroke: black;
  stroke-width: 30;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: rotate 3s linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform: translate(-125px, -125px);
}

@keyframes rotate {
  to {
    stroke-dashoffset: 750; /* trying to draw 25% of the circle */
  }
}

<svg class="parent" height="350" width="350">
  <circle cx="300" cy="300" r="150" stroke-linecap="round" />
</svg>

我没看到什么？

编辑：也许我会need JavaScript获得实际长度

var path = document.querySelector('.path');
var length = path.getTotalLength();

可能是这种情况，使用上面的代码，实际长度为〜942，然后使用25％的翻转长度为〜707，更接近绘制圆的25％。