我在Django HTML模板中使用tailwind.css，我试图重新创建这个圆圈https://tailwindcomponents.com/component/circular-progress-bar，但我没有滚动屏幕，我只是根据视图中的值设置了一个静态百分比。
这个平均速率计算不重要，这是在另一个部分工作，它只是一个例子，展示我想在我的径向条中做什么。

class RatePage(TemplateView):

template_name = "tailwind/rate-page.html"

def get_context_data(self, **kwargs):

    context = super(RatePage, self).get_context_data(**kwargs)

    context['average_rate'] = 4.5

    return context

这是我的HTML模板。

<div class="flex flex-col">
  Score

  <svg class="w-20 h-20">
    <circle
      class="text-gray-300"
      stroke-width="5"
      stroke="currentColor"
      fill="transparent"
      r="30"
      cx="40"
      cy="40"
    />
    <circle
      class="text-blue-600"
      stroke-width="5"
      :stroke-dasharray="circumference"
      :stroke-dashoffset="circumference - percent / 100 * circumference"
      stroke-linecap="round"
      stroke="currentColor"
      fill="transparent"
      r="30"
      cx="40"
      cy="40"
    />
  </svg>
  <span class="absolute text-xl text-blue-700" x-text=30></span>
</div>

<script>
  let percent = rate;
  let circumference = 2 * Math.PI * 30;
</script>

我试着把JavaScript和视图中的rate值连接起来进行演算，但是得到的结果是：

的数据
但是，我正在努力做到这一点：

有什么建议吗？