如何使用蒙版制作 svg 填充箭头
How to make svg fill arrow with mask
我想要一个圆形路径（遮罩）来填充 0 到 100% 的长度并不断重复。我试图在 SVG 文件中完成所有操作以使其更整洁。
我一直在关注使用以下简化代码（运行 片段）的教程：
<svg viewBox="0 0 340 333">
<path class="path" fill="white" stroke="black" stroke-width="4" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z" />
<style>
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</svg>
我的 svg 有一个遮罩，我正在使用相同的技术显示它。所以它应该显示从箭头开始到结束的 0 到 100 周长，然后重复。但是我不能让笔划从 0 长度开始。我在下面有一个圆圈，它正在做相同的动画，但它以长破折号而不是 0 长度开始。
我是否遗漏了 circle/path 代码中的某些内容？我怎样才能让它像上面的例子一样？我的代码片段：
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.04 526.04">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circular-chart {
position: absolute;
max-width: 50%;
}
.rotatemask {
transform: rotate(145deg);
}
.circle {
stroke: #D8D9DB;
stroke-linecap: square;
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: progress 5s linear forwards infinite;
}
@keyframes progress {
from {
stroke-dashoffset: 15000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</defs>
<mask id="theMask">
<path class="circle" stroke-width="120" transform="rotate(175 263.47 263.47)" d="M263.47 24.29
a 238.73 238.73 0 0 1 0 477.47
a 238.73 238.73 0 0 1 0 -477.47" />
</mask>
<g mask="url(#theMask)">
<path id="arrow" class="cls-1"
d="M435.11,526.36c96-59.59,143.45-166.26,123.34-275.42A262.66,262.66,0,0,0,364.66,44.26C280.39,22.94,178.69,54.6,128.05,101a4.86,4.86,0,0,0-.34,6.82l23.48,26.35a4.85,4.85,0,0,0,6.77.47c67.72-57.58,160.31-70.32,241.31-28.73,72.94,37.45,123.45,114.77,117.82,208.36-2.56,42.57-16.94,81.35-42.64,115.65a214.39,214.39,0,0,1-60.65,55.55,4.87,4.87,0,0,1-6.8-1.84l-9.51-17.43a4.87,4.87,0,0,0-8.34-.34l-43.29,66.24a4.87,4.87,0,0,0,2.95,7.39c30.19,7.22,59.83,14.62,90.17,21.55a4.87,4.87,0,0,0,5.37-7c-3.9-7.34-7.68-14.34-11.06-21.44a4.87,4.87,0,0,1,1.82-6.22"
transform="translate(-36.96 -37.47)" />
<path id="dash-5" class="cls-1"
d="M47.48,244.37l33.77,9.26a4.86,4.86,0,0,0,5.9-3.15c4.28-12.74,8-25.38,13.25-37.36,5.4-12.36,12.29-24.07,18.82-36.14a4.86,4.86,0,0,0-1.48-6.27q-12.54-8.86-25-17.67c-1.16-.82-2.32-1.62-3.56-2.45a4.87,4.87,0,0,0-6.71,1.22C64,178,51.8,207.89,44.35,235.87a16.33,16.33,0,0,0-.45,3.72,4.86,4.86,0,0,0,3.58,4.78"
transform="translate(-36.96 -37.47)" />
<path id="dash-4" class="cls-1"
d="M100.32,387.08a4.84,4.84,0,0,0-7.23-2l-29.42,20.6a4.87,4.87,0,0,0-1.73,5.79c6.94,17.35,24.14,44.47,34.44,54.79a4.85,4.85,0,0,0,6.62.24l26.76-23.23a4.85,4.85,0,0,0,.6-6.72,213.18,213.18,0,0,1-30-49.45"
transform="translate(-36.96 -37.47)" />
<path id="dash-3" class="cls-1"
d="M87.53,348c-3.72-16.86-5.28-33.78-5.81-50.93a4.86,4.86,0,0,0-4.61-4.7l-34.9-1.74a4.86,4.86,0,0,0-5.1,4.7A233,233,0,0,0,45.26,366,4.87,4.87,0,0,0,52,369.09l32.83-15.64A4.85,4.85,0,0,0,87.53,348"
transform="translate(-36.96 -37.47)" />
<path id="dash-2" class="cls-1"
d="M217.77,502.08a221,221,0,0,1-45.32-25.37,4.85,4.85,0,0,0-6.8,1.09l-20.9,29.09a4.88,4.88,0,0,0,1.06,6.76,258.87,258.87,0,0,0,54.73,30.46,4.87,4.87,0,0,0,6.38-2.65l13.49-33.05a4.87,4.87,0,0,0-2.64-6.33"
transform="translate(-36.96 -37.47)" />
<path id="dash-1" class="cls-1"
d="M310.06,522.28a4.88,4.88,0,0,0-4.25-3.34l-39.25-3.1a4.85,4.85,0,0,0-5.16,4L255,554.57a4.86,4.86,0,0,0,3.77,5.65c19.51,4,38.26,3.43,57.65,3.07a4.87,4.87,0,0,0,4.59-6.21c-3.52-12.2-7.28-23.64-10.91-34.8"
transform="translate(-36.96 -37.47)" />
</g>
<path class="cls-1" d="M293.57,381.07c-3.94,0-6.05,2.61-6.88,5.67h13.05c-.05-3.83-3.33-5.67-6.17-5.67"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M329.72,284.23c9.77,0,16.58-6.17,16.58-12.59,0-4.5-4-10-14.91-10-9.12,0-17.73,3.72-24.15,7.45,3.34,9.76,12.33,15.16,22.48,15.16"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M319.08,394.85c0,2.28,1.83,3.78,4.94,3.78a10.87,10.87,0,0,0,7.33-3V393a10.09,10.09,0,0,0-6.27-1.94c-4.39,0-6,1.72-6,3.77"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M286.65,346.46c4.62,0,7.28-3.89,7.28-8.39s-2.66-8.17-7.28-8.17-7.11,3.73-7.11,8.17,2.61,8.39,7.11,8.39"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M255.21,223.2H271v73h-17.6v-56.4l-16.83,7.32L232.85,233Zm31.46,100.54c8.84,0,14.84,6.27,14.84,14.33s-6,14.5-14.84,14.5S272,346.13,272,338.07s5.95-14.33,14.72-14.33m45.11-103c13,0,23,4.24,28.27,6.55l-7.84,12.21A48.39,48.39,0,0,0,332,235.15c-13.36,0-25.31,8.48-26.21,23.51,6.94-5.4,16.19-10.41,28-10.41,19.91,0,29.93,11.95,29.93,23.39,0,15.16-14,27-33.92,27-20.68,0-40.6-12.85-40.6-37.65,0-25.31,20.3-40.21,42.53-40.21M363.1,383.67a12.89,12.89,0,0,0-3.67-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.44V384.33a41.62,41.62,0,0,0-.78-7.67h6.78a40.36,40.36,0,0,1,.55,4.06c1.67-2.78,3.61-4.94,7.12-4.94a7.69,7.69,0,0,1,4.16,1.11Zm-21.75-59.05h6.77a37.57,37.57,0,0,1,.56,4.06c1.67-2.78,3.61-4.94,7.11-4.94a7.72,7.72,0,0,1,4.17,1.11l-2.06,6.78a12.82,12.82,0,0,0-3.66-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.45V332.29a41.53,41.53,0,0,0-.77-7.67m-9,79.16a23.58,23.58,0,0,1-.66-3.11,11.79,11.79,0,0,1-9.12,3.78c-6.55,0-10.72-3.95-10.72-9.23,0-5.05,4.33-9,11.89-9a12.82,12.82,0,0,1,7.78,2.23v-2.73c0-2.83-2.44-4.11-5.72-4.11a24.55,24.55,0,0,0-9.78,2.56l-2.28-5.51a30.59,30.59,0,0,1,12.67-2.88c6.22,0,12.5,2.11,12.5,8.22v14.5a17.39,17.39,0,0,0,.78,5.28ZM307.9,342.85V324.62h7.44v17.95c0,2.11,1.84,3.78,4.5,3.78s4.67-1.72,6.23-3.5V324.62h7.39v19.45a40.89,40.89,0,0,0,.66,7.67h-6.89c-.16-.95-.27-2.45-.33-3.5a11.64,11.64,0,0,1-9.11,4.39,9.64,9.64,0,0,1-9.89-9.78m-.58,49.21H286.7a7.43,7.43,0,0,0,7.84,6.61,14.82,14.82,0,0,0,8.33-2.78l3.5,4.72a22.24,22.24,0,0,1-12.78,4c-9.17,0-14.17-6.55-14.17-14.17,0-8.22,6-14.66,14.39-14.66,6.62,0,13.62,4,13.62,14,0,.44,0,1-.11,2.28m-52.09-68.32c6.17,0,10.34,4.11,10.34,9.77v18.23h-7.45V333.79c0-2.05-1.89-3.78-4.56-3.78s-4.89,1.83-6.16,3.5v18.23H240v-38.9h7.39v14.62a11.15,11.15,0,0,1,7.83-3.72m12.08,80h-7.05l-4.73-16.62h-.33l-4.78,16.62h-7l-8.61-27.12h7.78L246.92,394h.34l4.89-17.34h6.72L263.76,394h.33l4.22-17.34h7.62Zm-125.38-104A158.06,158.06,0,1,0,300,141.74a158.05,158.05,0,0,0-158,158.05"
transform="translate(-36.96 -37.47)" />
</svg>
我也将圆圈转换为路径，认为这会有所帮助（因为教程有路径），但它在做同样的事情：
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.04 526.04">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circular-chart {
position: absolute;
max-width: 50%;
}
.rotatemask {
transform: rotate(145deg);
}
.circle {
stroke: #D8D9DB;
stroke-linecap: square;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: progress 2s linear forwards infinite;
}
@keyframes progress {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 1000;
}
}
</style>
</defs>
<mask id="theMask">
<!-- <path class="circle" stroke-width="120" transform="rotate(-74 238.73 238.73)" d="M263.47 24.29 a 238.73 238.73 0 0 1 0 -477.47" /> -->
<path class="circle" stroke-width="160" transform="rotate(-74 238.73 238.73)"
d="M-24.289999999999992,238.73a263.02,263.02 0 1,0 526.04,0a263.02,263.02 0 1,0 -526.04,0" />
</mask>
<g mask="url(#theMask)">
<path id="arrow" class="cls-1"
d="M435.11,526.36c96-59.59,143.45-166.26,123.34-275.42A262.66,262.66,0,0,0,364.66,44.26C280.39,22.94,178.69,54.6,128.05,101a4.86,4.86,0,0,0-.34,6.82l23.48,26.35a4.85,4.85,0,0,0,6.77.47c67.72-57.58,160.31-70.32,241.31-28.73,72.94,37.45,123.45,114.77,117.82,208.36-2.56,42.57-16.94,81.35-42.64,115.65a214.39,214.39,0,0,1-60.65,55.55,4.87,4.87,0,0,1-6.8-1.84l-9.51-17.43a4.87,4.87,0,0,0-8.34-.34l-43.29,66.24a4.87,4.87,0,0,0,2.95,7.39c30.19,7.22,59.83,14.62,90.17,21.55a4.87,4.87,0,0,0,5.37-7c-3.9-7.34-7.68-14.34-11.06-21.44a4.87,4.87,0,0,1,1.82-6.22"
transform="translate(-36.96 -37.47)" />
<path id="dash-5" class="cls-1"
d="M47.48,244.37l33.77,9.26a4.86,4.86,0,0,0,5.9-3.15c4.28-12.74,8-25.38,13.25-37.36,5.4-12.36,12.29-24.07,18.82-36.14a4.86,4.86,0,0,0-1.48-6.27q-12.54-8.86-25-17.67c-1.16-.82-2.32-1.62-3.56-2.45a4.87,4.87,0,0,0-6.71,1.22C64,178,51.8,207.89,44.35,235.87a16.33,16.33,0,0,0-.45,3.72,4.86,4.86,0,0,0,3.58,4.78"
transform="translate(-36.96 -37.47)" />
<path id="dash-4" class="cls-1"
d="M100.32,387.08a4.84,4.84,0,0,0-7.23-2l-29.42,20.6a4.87,4.87,0,0,0-1.73,5.79c6.94,17.35,24.14,44.47,34.44,54.79a4.85,4.85,0,0,0,6.62.24l26.76-23.23a4.85,4.85,0,0,0,.6-6.72,213.18,213.18,0,0,1-30-49.45"
transform="translate(-36.96 -37.47)" />
<path id="dash-3" class="cls-1"
d="M87.53,348c-3.72-16.86-5.28-33.78-5.81-50.93a4.86,4.86,0,0,0-4.61-4.7l-34.9-1.74a4.86,4.86,0,0,0-5.1,4.7A233,233,0,0,0,45.26,366,4.87,4.87,0,0,0,52,369.09l32.83-15.64A4.85,4.85,0,0,0,87.53,348"
transform="translate(-36.96 -37.47)" />
<path id="dash-2" class="cls-1"
d="M217.77,502.08a221,221,0,0,1-45.32-25.37,4.85,4.85,0,0,0-6.8,1.09l-20.9,29.09a4.88,4.88,0,0,0,1.06,6.76,258.87,258.87,0,0,0,54.73,30.46,4.87,4.87,0,0,0,6.38-2.65l13.49-33.05a4.87,4.87,0,0,0-2.64-6.33"
transform="translate(-36.96 -37.47)" />
<path id="dash-1" class="cls-1"
d="M310.06,522.28a4.88,4.88,0,0,0-4.25-3.34l-39.25-3.1a4.85,4.85,0,0,0-5.16,4L255,554.57a4.86,4.86,0,0,0,3.77,5.65c19.51,4,38.26,3.43,57.65,3.07a4.87,4.87,0,0,0,4.59-6.21c-3.52-12.2-7.28-23.64-10.91-34.8"
transform="translate(-36.96 -37.47)" />
</g>
<path class="cls-1" d="M293.57,381.07c-3.94,0-6.05,2.61-6.88,5.67h13.05c-.05-3.83-3.33-5.67-6.17-5.67"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M329.72,284.23c9.77,0,16.58-6.17,16.58-12.59,0-4.5-4-10-14.91-10-9.12,0-17.73,3.72-24.15,7.45,3.34,9.76,12.33,15.16,22.48,15.16"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M319.08,394.85c0,2.28,1.83,3.78,4.94,3.78a10.87,10.87,0,0,0,7.33-3V393a10.09,10.09,0,0,0-6.27-1.94c-4.39,0-6,1.72-6,3.77"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M286.65,346.46c4.62,0,7.28-3.89,7.28-8.39s-2.66-8.17-7.28-8.17-7.11,3.73-7.11,8.17,2.61,8.39,7.11,8.39"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M255.21,223.2H271v73h-17.6v-56.4l-16.83,7.32L232.85,233Zm31.46,100.54c8.84,0,14.84,6.27,14.84,14.33s-6,14.5-14.84,14.5S272,346.13,272,338.07s5.95-14.33,14.72-14.33m45.11-103c13,0,23,4.24,28.27,6.55l-7.84,12.21A48.39,48.39,0,0,0,332,235.15c-13.36,0-25.31,8.48-26.21,23.51,6.94-5.4,16.19-10.41,28-10.41,19.91,0,29.93,11.95,29.93,23.39,0,15.16-14,27-33.92,27-20.68,0-40.6-12.85-40.6-37.65,0-25.31,20.3-40.21,42.53-40.21M363.1,383.67a12.89,12.89,0,0,0-3.67-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.44V384.33a41.62,41.62,0,0,0-.78-7.67h6.78a40.36,40.36,0,0,1,.55,4.06c1.67-2.78,3.61-4.94,7.12-4.94a7.69,7.69,0,0,1,4.16,1.11Zm-21.75-59.05h6.77a37.57,37.57,0,0,1,.56,4.06c1.67-2.78,3.61-4.94,7.11-4.94a7.72,7.72,0,0,1,4.17,1.11l-2.06,6.78a12.82,12.82,0,0,0-3.66-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.45V332.29a41.53,41.53,0,0,0-.77-7.67m-9,79.16a23.58,23.58,0,0,1-.66-3.11,11.79,11.79,0,0,1-9.12,3.78c-6.55,0-10.72-3.95-10.72-9.23,0-5.05,4.33-9,11.89-9a12.82,12.82,0,0,1,7.78,2.23v-2.73c0-2.83-2.44-4.11-5.72-4.11a24.55,24.55,0,0,0-9.78,2.56l-2.28-5.51a30.59,30.59,0,0,1,12.67-2.88c6.22,0,12.5,2.11,12.5,8.22v14.5a17.39,17.39,0,0,0,.78,5.28ZM307.9,342.85V324.62h7.44v17.95c0,2.11,1.84,3.78,4.5,3.78s4.67-1.72,6.23-3.5V324.62h7.39v19.45a40.89,40.89,0,0,0,.66,7.67h-6.89c-.16-.95-.27-2.45-.33-3.5a11.64,11.64,0,0,1-9.11,4.39,9.64,9.64,0,0,1-9.89-9.78m-.58,49.21H286.7a7.43,7.43,0,0,0,7.84,6.61,14.82,14.82,0,0,0,8.33-2.78l3.5,4.72a22.24,22.24,0,0,1-12.78,4c-9.17,0-14.17-6.55-14.17-14.17,0-8.22,6-14.66,14.39-14.66,6.62,0,13.62,4,13.62,14,0,.44,0,1-.11,2.28m-52.09-68.32c6.17,0,10.34,4.11,10.34,9.77v18.23h-7.45V333.79c0-2.05-1.89-3.78-4.56-3.78s-4.89,1.83-6.16,3.5v18.23H240v-38.9h7.39v14.62a11.15,11.15,0,0,1,7.83-3.72m12.08,80h-7.05l-4.73-16.62h-.33l-4.78,16.62h-7l-8.61-27.12h7.78L246.92,394h.34l4.89-17.34h6.72L263.76,394h.33l4.22-17.34h7.62Zm-125.38-104A158.06,158.06,0,1,0,300,141.74a158.05,158.05,0,0,0-158,158.05"
transform="translate(-36.96 -37.47)" />
</svg>
回答：谢谢 Temani
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.04 526.04">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circular-chart {
position: absolute;
max-width: 50%;
}
.circle {
stroke: #D8D9DB;
stroke-linecap: none;
stroke-dasharray: 2000;
stroke-dashoffset: 1000;
animation: progress 5s linear forwards infinite;
}
@keyframes progress {
from {
stroke-dashoffset: 2000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</defs>
<mask id="theMask">
<path class="circle" stroke-width="120" transform="rotate(170 263.47 263.47)" d="M263.47 24.29
a 238.73 238.73 0 0 1 0 477.47
a 238.73 238.73 0 0 1 0 -477.47" />
</mask>
<g mask="url(#theMask)">
<path id="arrow" class="cls-1"
d="M435.11,526.36c96-59.59,143.45-166.26,123.34-275.42A262.66,262.66,0,0,0,364.66,44.26C280.39,22.94,178.69,54.6,128.05,101a4.86,4.86,0,0,0-.34,6.82l23.48,26.35a4.85,4.85,0,0,0,6.77.47c67.72-57.58,160.31-70.32,241.31-28.73,72.94,37.45,123.45,114.77,117.82,208.36-2.56,42.57-16.94,81.35-42.64,115.65a214.39,214.39,0,0,1-60.65,55.55,4.87,4.87,0,0,1-6.8-1.84l-9.51-17.43a4.87,4.87,0,0,0-8.34-.34l-43.29,66.24a4.87,4.87,0,0,0,2.95,7.39c30.19,7.22,59.83,14.62,90.17,21.55a4.87,4.87,0,0,0,5.37-7c-3.9-7.34-7.68-14.34-11.06-21.44a4.87,4.87,0,0,1,1.82-6.22"
transform="translate(-36.96 -37.47)" />
<path id="dash-5" class="cls-1"
d="M47.48,244.37l33.77,9.26a4.86,4.86,0,0,0,5.9-3.15c4.28-12.74,8-25.38,13.25-37.36,5.4-12.36,12.29-24.07,18.82-36.14a4.86,4.86,0,0,0-1.48-6.27q-12.54-8.86-25-17.67c-1.16-.82-2.32-1.62-3.56-2.45a4.87,4.87,0,0,0-6.71,1.22C64,178,51.8,207.89,44.35,235.87a16.33,16.33,0,0,0-.45,3.72,4.86,4.86,0,0,0,3.58,4.78"
transform="translate(-36.96 -37.47)" />
<path id="dash-4" class="cls-1"
d="M100.32,387.08a4.84,4.84,0,0,0-7.23-2l-29.42,20.6a4.87,4.87,0,0,0-1.73,5.79c6.94,17.35,24.14,44.47,34.44,54.79a4.85,4.85,0,0,0,6.62.24l26.76-23.23a4.85,4.85,0,0,0,.6-6.72,213.18,213.18,0,0,1-30-49.45"
transform="translate(-36.96 -37.47)" />
<path id="dash-3" class="cls-1"
d="M87.53,348c-3.72-16.86-5.28-33.78-5.81-50.93a4.86,4.86,0,0,0-4.61-4.7l-34.9-1.74a4.86,4.86,0,0,0-5.1,4.7A233,233,0,0,0,45.26,366,4.87,4.87,0,0,0,52,369.09l32.83-15.64A4.85,4.85,0,0,0,87.53,348"
transform="translate(-36.96 -37.47)" />
<path id="dash-2" class="cls-1"
d="M217.77,502.08a221,221,0,0,1-45.32-25.37,4.85,4.85,0,0,0-6.8,1.09l-20.9,29.09a4.88,4.88,0,0,0,1.06,6.76,258.87,258.87,0,0,0,54.73,30.46,4.87,4.87,0,0,0,6.38-2.65l13.49-33.05a4.87,4.87,0,0,0-2.64-6.33"
transform="translate(-36.96 -37.47)" />
<path id="dash-1" class="cls-1"
d="M310.06,522.28a4.88,4.88,0,0,0-4.25-3.34l-39.25-3.1a4.85,4.85,0,0,0-5.16,4L255,554.57a4.86,4.86,0,0,0,3.77,5.65c19.51,4,38.26,3.43,57.65,3.07a4.87,4.87,0,0,0,4.59-6.21c-3.52-12.2-7.28-23.64-10.91-34.8"
transform="translate(-36.96 -37.47)" />
</g>
<path class="cls-1" d="M293.57,381.07c-3.94,0-6.05,2.61-6.88,5.67h13.05c-.05-3.83-3.33-5.67-6.17-5.67"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M329.72,284.23c9.77,0,16.58-6.17,16.58-12.59,0-4.5-4-10-14.91-10-9.12,0-17.73,3.72-24.15,7.45,3.34,9.76,12.33,15.16,22.48,15.16"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M319.08,394.85c0,2.28,1.83,3.78,4.94,3.78a10.87,10.87,0,0,0,7.33-3V393a10.09,10.09,0,0,0-6.27-1.94c-4.39,0-6,1.72-6,3.77"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M286.65,346.46c4.62,0,7.28-3.89,7.28-8.39s-2.66-8.17-7.28-8.17-7.11,3.73-7.11,8.17,2.61,8.39,7.11,8.39"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M255.21,223.2H271v73h-17.6v-56.4l-16.83,7.32L232.85,233Zm31.46,100.54c8.84,0,14.84,6.27,14.84,14.33s-6,14.5-14.84,14.5S272,346.13,272,338.07s5.95-14.33,14.72-14.33m45.11-103c13,0,23,4.24,28.27,6.55l-7.84,12.21A48.39,48.39,0,0,0,332,235.15c-13.36,0-25.31,8.48-26.21,23.51,6.94-5.4,16.19-10.41,28-10.41,19.91,0,29.93,11.95,29.93,23.39,0,15.16-14,27-33.92,27-20.68,0-40.6-12.85-40.6-37.65,0-25.31,20.3-40.21,42.53-40.21M363.1,383.67a12.89,12.89,0,0,0-3.67-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.44V384.33a41.62,41.62,0,0,0-.78-7.67h6.78a40.36,40.36,0,0,1,.55,4.06c1.67-2.78,3.61-4.94,7.12-4.94a7.69,7.69,0,0,1,4.16,1.11Zm-21.75-59.05h6.77a37.57,37.57,0,0,1,.56,4.06c1.67-2.78,3.61-4.94,7.11-4.94a7.72,7.72,0,0,1,4.17,1.11l-2.06,6.78a12.82,12.82,0,0,0-3.66-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.45V332.29a41.53,41.53,0,0,0-.77-7.67m-9,79.16a23.58,23.58,0,0,1-.66-3.11,11.79,11.79,0,0,1-9.12,3.78c-6.55,0-10.72-3.95-10.72-9.23,0-5.05,4.33-9,11.89-9a12.82,12.82,0,0,1,7.78,2.23v-2.73c0-2.83-2.44-4.11-5.72-4.11a24.55,24.55,0,0,0-9.78,2.56l-2.28-5.51a30.59,30.59,0,0,1,12.67-2.88c6.22,0,12.5,2.11,12.5,8.22v14.5a17.39,17.39,0,0,0,.78,5.28ZM307.9,342.85V324.62h7.44v17.95c0,2.11,1.84,3.78,4.5,3.78s4.67-1.72,6.23-3.5V324.62h7.39v19.45a40.89,40.89,0,0,0,.66,7.67h-6.89c-.16-.95-.27-2.45-.33-3.5a11.64,11.64,0,0,1-9.11,4.39,9.64,9.64,0,0,1-9.89-9.78m-.58,49.21H286.7a7.43,7.43,0,0,0,7.84,6.61,14.82,14.82,0,0,0,8.33-2.78l3.5,4.72a22.24,22.24,0,0,1-12.78,4c-9.17,0-14.17-6.55-14.17-14.17,0-8.22,6-14.66,14.39-14.66,6.62,0,13.62,4,13.62,14,0,.44,0,1-.11,2.28m-52.09-68.32c6.17,0,10.34,4.11,10.34,9.77v18.23h-7.45V333.79c0-2.05-1.89-3.78-4.56-3.78s-4.89,1.83-6.16,3.5v18.23H240v-38.9h7.39v14.62a11.15,11.15,0,0,1,7.83-3.72m12.08,80h-7.05l-4.73-16.62h-.33l-4.78,16.62h-7l-8.61-27.12h7.78L246.92,394h.34l4.89-17.34h6.72L263.76,394h.33l4.22-17.34h7.62Zm-125.38-104A158.06,158.06,0,1,0,300,141.74a158.05,158.05,0,0,0-158,158.05"
transform="translate(-36.96 -37.47)" />
</svg>
我想要一个圆形路径（遮罩）来填充 0 到 100% 的长度并不断重复。我试图在 SVG 文件中完成所有操作以使其更整洁。
我一直在关注使用以下简化代码（运行 片段）的教程：
<svg viewBox="0 0 340 333">
<path class="path" fill="white" stroke="black" stroke-width="4" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z" />
<style>
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</svg>
我的 svg 有一个遮罩，我正在使用相同的技术显示它。所以它应该显示从箭头开始到结束的 0 到 100 周长，然后重复。但是我不能让笔划从 0 长度开始。我在下面有一个圆圈，它正在做相同的动画，但它以长破折号而不是 0 长度开始。
我是否遗漏了 circle/path 代码中的某些内容？我怎样才能让它像上面的例子一样？我的代码片段：
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.04 526.04">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circular-chart {
position: absolute;
max-width: 50%;
}
.rotatemask {
transform: rotate(145deg);
}
.circle {
stroke: #D8D9DB;
stroke-linecap: square;
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: progress 5s linear forwards infinite;
}
@keyframes progress {
from {
stroke-dashoffset: 15000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</defs>
<mask id="theMask">
<path class="circle" stroke-width="120" transform="rotate(175 263.47 263.47)" d="M263.47 24.29
a 238.73 238.73 0 0 1 0 477.47
a 238.73 238.73 0 0 1 0 -477.47" />
</mask>
<g mask="url(#theMask)">
<path id="arrow" class="cls-1"
d="M435.11,526.36c96-59.59,143.45-166.26,123.34-275.42A262.66,262.66,0,0,0,364.66,44.26C280.39,22.94,178.69,54.6,128.05,101a4.86,4.86,0,0,0-.34,6.82l23.48,26.35a4.85,4.85,0,0,0,6.77.47c67.72-57.58,160.31-70.32,241.31-28.73,72.94,37.45,123.45,114.77,117.82,208.36-2.56,42.57-16.94,81.35-42.64,115.65a214.39,214.39,0,0,1-60.65,55.55,4.87,4.87,0,0,1-6.8-1.84l-9.51-17.43a4.87,4.87,0,0,0-8.34-.34l-43.29,66.24a4.87,4.87,0,0,0,2.95,7.39c30.19,7.22,59.83,14.62,90.17,21.55a4.87,4.87,0,0,0,5.37-7c-3.9-7.34-7.68-14.34-11.06-21.44a4.87,4.87,0,0,1,1.82-6.22"
transform="translate(-36.96 -37.47)" />
<path id="dash-5" class="cls-1"
d="M47.48,244.37l33.77,9.26a4.86,4.86,0,0,0,5.9-3.15c4.28-12.74,8-25.38,13.25-37.36,5.4-12.36,12.29-24.07,18.82-36.14a4.86,4.86,0,0,0-1.48-6.27q-12.54-8.86-25-17.67c-1.16-.82-2.32-1.62-3.56-2.45a4.87,4.87,0,0,0-6.71,1.22C64,178,51.8,207.89,44.35,235.87a16.33,16.33,0,0,0-.45,3.72,4.86,4.86,0,0,0,3.58,4.78"
transform="translate(-36.96 -37.47)" />
<path id="dash-4" class="cls-1"
d="M100.32,387.08a4.84,4.84,0,0,0-7.23-2l-29.42,20.6a4.87,4.87,0,0,0-1.73,5.79c6.94,17.35,24.14,44.47,34.44,54.79a4.85,4.85,0,0,0,6.62.24l26.76-23.23a4.85,4.85,0,0,0,.6-6.72,213.18,213.18,0,0,1-30-49.45"
transform="translate(-36.96 -37.47)" />
<path id="dash-3" class="cls-1"
d="M87.53,348c-3.72-16.86-5.28-33.78-5.81-50.93a4.86,4.86,0,0,0-4.61-4.7l-34.9-1.74a4.86,4.86,0,0,0-5.1,4.7A233,233,0,0,0,45.26,366,4.87,4.87,0,0,0,52,369.09l32.83-15.64A4.85,4.85,0,0,0,87.53,348"
transform="translate(-36.96 -37.47)" />
<path id="dash-2" class="cls-1"
d="M217.77,502.08a221,221,0,0,1-45.32-25.37,4.85,4.85,0,0,0-6.8,1.09l-20.9,29.09a4.88,4.88,0,0,0,1.06,6.76,258.87,258.87,0,0,0,54.73,30.46,4.87,4.87,0,0,0,6.38-2.65l13.49-33.05a4.87,4.87,0,0,0-2.64-6.33"
transform="translate(-36.96 -37.47)" />
<path id="dash-1" class="cls-1"
d="M310.06,522.28a4.88,4.88,0,0,0-4.25-3.34l-39.25-3.1a4.85,4.85,0,0,0-5.16,4L255,554.57a4.86,4.86,0,0,0,3.77,5.65c19.51,4,38.26,3.43,57.65,3.07a4.87,4.87,0,0,0,4.59-6.21c-3.52-12.2-7.28-23.64-10.91-34.8"
transform="translate(-36.96 -37.47)" />
</g>
<path class="cls-1" d="M293.57,381.07c-3.94,0-6.05,2.61-6.88,5.67h13.05c-.05-3.83-3.33-5.67-6.17-5.67"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M329.72,284.23c9.77,0,16.58-6.17,16.58-12.59,0-4.5-4-10-14.91-10-9.12,0-17.73,3.72-24.15,7.45,3.34,9.76,12.33,15.16,22.48,15.16"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M319.08,394.85c0,2.28,1.83,3.78,4.94,3.78a10.87,10.87,0,0,0,7.33-3V393a10.09,10.09,0,0,0-6.27-1.94c-4.39,0-6,1.72-6,3.77"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M286.65,346.46c4.62,0,7.28-3.89,7.28-8.39s-2.66-8.17-7.28-8.17-7.11,3.73-7.11,8.17,2.61,8.39,7.11,8.39"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M255.21,223.2H271v73h-17.6v-56.4l-16.83,7.32L232.85,233Zm31.46,100.54c8.84,0,14.84,6.27,14.84,14.33s-6,14.5-14.84,14.5S272,346.13,272,338.07s5.95-14.33,14.72-14.33m45.11-103c13,0,23,4.24,28.27,6.55l-7.84,12.21A48.39,48.39,0,0,0,332,235.15c-13.36,0-25.31,8.48-26.21,23.51,6.94-5.4,16.19-10.41,28-10.41,19.91,0,29.93,11.95,29.93,23.39,0,15.16-14,27-33.92,27-20.68,0-40.6-12.85-40.6-37.65,0-25.31,20.3-40.21,42.53-40.21M363.1,383.67a12.89,12.89,0,0,0-3.67-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.44V384.33a41.62,41.62,0,0,0-.78-7.67h6.78a40.36,40.36,0,0,1,.55,4.06c1.67-2.78,3.61-4.94,7.12-4.94a7.69,7.69,0,0,1,4.16,1.11Zm-21.75-59.05h6.77a37.57,37.57,0,0,1,.56,4.06c1.67-2.78,3.61-4.94,7.11-4.94a7.72,7.72,0,0,1,4.17,1.11l-2.06,6.78a12.82,12.82,0,0,0-3.66-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.45V332.29a41.53,41.53,0,0,0-.77-7.67m-9,79.16a23.58,23.58,0,0,1-.66-3.11,11.79,11.79,0,0,1-9.12,3.78c-6.55,0-10.72-3.95-10.72-9.23,0-5.05,4.33-9,11.89-9a12.82,12.82,0,0,1,7.78,2.23v-2.73c0-2.83-2.44-4.11-5.72-4.11a24.55,24.55,0,0,0-9.78,2.56l-2.28-5.51a30.59,30.59,0,0,1,12.67-2.88c6.22,0,12.5,2.11,12.5,8.22v14.5a17.39,17.39,0,0,0,.78,5.28ZM307.9,342.85V324.62h7.44v17.95c0,2.11,1.84,3.78,4.5,3.78s4.67-1.72,6.23-3.5V324.62h7.39v19.45a40.89,40.89,0,0,0,.66,7.67h-6.89c-.16-.95-.27-2.45-.33-3.5a11.64,11.64,0,0,1-9.11,4.39,9.64,9.64,0,0,1-9.89-9.78m-.58,49.21H286.7a7.43,7.43,0,0,0,7.84,6.61,14.82,14.82,0,0,0,8.33-2.78l3.5,4.72a22.24,22.24,0,0,1-12.78,4c-9.17,0-14.17-6.55-14.17-14.17,0-8.22,6-14.66,14.39-14.66,6.62,0,13.62,4,13.62,14,0,.44,0,1-.11,2.28m-52.09-68.32c6.17,0,10.34,4.11,10.34,9.77v18.23h-7.45V333.79c0-2.05-1.89-3.78-4.56-3.78s-4.89,1.83-6.16,3.5v18.23H240v-38.9h7.39v14.62a11.15,11.15,0,0,1,7.83-3.72m12.08,80h-7.05l-4.73-16.62h-.33l-4.78,16.62h-7l-8.61-27.12h7.78L246.92,394h.34l4.89-17.34h6.72L263.76,394h.33l4.22-17.34h7.62Zm-125.38-104A158.06,158.06,0,1,0,300,141.74a158.05,158.05,0,0,0-158,158.05"
transform="translate(-36.96 -37.47)" />
</svg>
我也将圆圈转换为路径，认为这会有所帮助（因为教程有路径），但它在做同样的事情：
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.04 526.04">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circular-chart {
position: absolute;
max-width: 50%;
}
.rotatemask {
transform: rotate(145deg);
}
.circle {
stroke: #D8D9DB;
stroke-linecap: square;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: progress 2s linear forwards infinite;
}
@keyframes progress {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 1000;
}
}
</style>
</defs>
<mask id="theMask">
<!-- <path class="circle" stroke-width="120" transform="rotate(-74 238.73 238.73)" d="M263.47 24.29 a 238.73 238.73 0 0 1 0 -477.47" /> -->
<path class="circle" stroke-width="160" transform="rotate(-74 238.73 238.73)"
d="M-24.289999999999992,238.73a263.02,263.02 0 1,0 526.04,0a263.02,263.02 0 1,0 -526.04,0" />
</mask>
<g mask="url(#theMask)">
<path id="arrow" class="cls-1"
d="M435.11,526.36c96-59.59,143.45-166.26,123.34-275.42A262.66,262.66,0,0,0,364.66,44.26C280.39,22.94,178.69,54.6,128.05,101a4.86,4.86,0,0,0-.34,6.82l23.48,26.35a4.85,4.85,0,0,0,6.77.47c67.72-57.58,160.31-70.32,241.31-28.73,72.94,37.45,123.45,114.77,117.82,208.36-2.56,42.57-16.94,81.35-42.64,115.65a214.39,214.39,0,0,1-60.65,55.55,4.87,4.87,0,0,1-6.8-1.84l-9.51-17.43a4.87,4.87,0,0,0-8.34-.34l-43.29,66.24a4.87,4.87,0,0,0,2.95,7.39c30.19,7.22,59.83,14.62,90.17,21.55a4.87,4.87,0,0,0,5.37-7c-3.9-7.34-7.68-14.34-11.06-21.44a4.87,4.87,0,0,1,1.82-6.22"
transform="translate(-36.96 -37.47)" />
<path id="dash-5" class="cls-1"
d="M47.48,244.37l33.77,9.26a4.86,4.86,0,0,0,5.9-3.15c4.28-12.74,8-25.38,13.25-37.36,5.4-12.36,12.29-24.07,18.82-36.14a4.86,4.86,0,0,0-1.48-6.27q-12.54-8.86-25-17.67c-1.16-.82-2.32-1.62-3.56-2.45a4.87,4.87,0,0,0-6.71,1.22C64,178,51.8,207.89,44.35,235.87a16.33,16.33,0,0,0-.45,3.72,4.86,4.86,0,0,0,3.58,4.78"
transform="translate(-36.96 -37.47)" />
<path id="dash-4" class="cls-1"
d="M100.32,387.08a4.84,4.84,0,0,0-7.23-2l-29.42,20.6a4.87,4.87,0,0,0-1.73,5.79c6.94,17.35,24.14,44.47,34.44,54.79a4.85,4.85,0,0,0,6.62.24l26.76-23.23a4.85,4.85,0,0,0,.6-6.72,213.18,213.18,0,0,1-30-49.45"
transform="translate(-36.96 -37.47)" />
<path id="dash-3" class="cls-1"
d="M87.53,348c-3.72-16.86-5.28-33.78-5.81-50.93a4.86,4.86,0,0,0-4.61-4.7l-34.9-1.74a4.86,4.86,0,0,0-5.1,4.7A233,233,0,0,0,45.26,366,4.87,4.87,0,0,0,52,369.09l32.83-15.64A4.85,4.85,0,0,0,87.53,348"
transform="translate(-36.96 -37.47)" />
<path id="dash-2" class="cls-1"
d="M217.77,502.08a221,221,0,0,1-45.32-25.37,4.85,4.85,0,0,0-6.8,1.09l-20.9,29.09a4.88,4.88,0,0,0,1.06,6.76,258.87,258.87,0,0,0,54.73,30.46,4.87,4.87,0,0,0,6.38-2.65l13.49-33.05a4.87,4.87,0,0,0-2.64-6.33"
transform="translate(-36.96 -37.47)" />
<path id="dash-1" class="cls-1"
d="M310.06,522.28a4.88,4.88,0,0,0-4.25-3.34l-39.25-3.1a4.85,4.85,0,0,0-5.16,4L255,554.57a4.86,4.86,0,0,0,3.77,5.65c19.51,4,38.26,3.43,57.65,3.07a4.87,4.87,0,0,0,4.59-6.21c-3.52-12.2-7.28-23.64-10.91-34.8"
transform="translate(-36.96 -37.47)" />
</g>
<path class="cls-1" d="M293.57,381.07c-3.94,0-6.05,2.61-6.88,5.67h13.05c-.05-3.83-3.33-5.67-6.17-5.67"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M329.72,284.23c9.77,0,16.58-6.17,16.58-12.59,0-4.5-4-10-14.91-10-9.12,0-17.73,3.72-24.15,7.45,3.34,9.76,12.33,15.16,22.48,15.16"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M319.08,394.85c0,2.28,1.83,3.78,4.94,3.78a10.87,10.87,0,0,0,7.33-3V393a10.09,10.09,0,0,0-6.27-1.94c-4.39,0-6,1.72-6,3.77"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M286.65,346.46c4.62,0,7.28-3.89,7.28-8.39s-2.66-8.17-7.28-8.17-7.11,3.73-7.11,8.17,2.61,8.39,7.11,8.39"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M255.21,223.2H271v73h-17.6v-56.4l-16.83,7.32L232.85,233Zm31.46,100.54c8.84,0,14.84,6.27,14.84,14.33s-6,14.5-14.84,14.5S272,346.13,272,338.07s5.95-14.33,14.72-14.33m45.11-103c13,0,23,4.24,28.27,6.55l-7.84,12.21A48.39,48.39,0,0,0,332,235.15c-13.36,0-25.31,8.48-26.21,23.51,6.94-5.4,16.19-10.41,28-10.41,19.91,0,29.93,11.95,29.93,23.39,0,15.16-14,27-33.92,27-20.68,0-40.6-12.85-40.6-37.65,0-25.31,20.3-40.21,42.53-40.21M363.1,383.67a12.89,12.89,0,0,0-3.67-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.44V384.33a41.62,41.62,0,0,0-.78-7.67h6.78a40.36,40.36,0,0,1,.55,4.06c1.67-2.78,3.61-4.94,7.12-4.94a7.69,7.69,0,0,1,4.16,1.11Zm-21.75-59.05h6.77a37.57,37.57,0,0,1,.56,4.06c1.67-2.78,3.61-4.94,7.11-4.94a7.72,7.72,0,0,1,4.17,1.11l-2.06,6.78a12.82,12.82,0,0,0-3.66-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.45V332.29a41.53,41.53,0,0,0-.77-7.67m-9,79.16a23.58,23.58,0,0,1-.66-3.11,11.79,11.79,0,0,1-9.12,3.78c-6.55,0-10.72-3.95-10.72-9.23,0-5.05,4.33-9,11.89-9a12.82,12.82,0,0,1,7.78,2.23v-2.73c0-2.83-2.44-4.11-5.72-4.11a24.55,24.55,0,0,0-9.78,2.56l-2.28-5.51a30.59,30.59,0,0,1,12.67-2.88c6.22,0,12.5,2.11,12.5,8.22v14.5a17.39,17.39,0,0,0,.78,5.28ZM307.9,342.85V324.62h7.44v17.95c0,2.11,1.84,3.78,4.5,3.78s4.67-1.72,6.23-3.5V324.62h7.39v19.45a40.89,40.89,0,0,0,.66,7.67h-6.89c-.16-.95-.27-2.45-.33-3.5a11.64,11.64,0,0,1-9.11,4.39,9.64,9.64,0,0,1-9.89-9.78m-.58,49.21H286.7a7.43,7.43,0,0,0,7.84,6.61,14.82,14.82,0,0,0,8.33-2.78l3.5,4.72a22.24,22.24,0,0,1-12.78,4c-9.17,0-14.17-6.55-14.17-14.17,0-8.22,6-14.66,14.39-14.66,6.62,0,13.62,4,13.62,14,0,.44,0,1-.11,2.28m-52.09-68.32c6.17,0,10.34,4.11,10.34,9.77v18.23h-7.45V333.79c0-2.05-1.89-3.78-4.56-3.78s-4.89,1.83-6.16,3.5v18.23H240v-38.9h7.39v14.62a11.15,11.15,0,0,1,7.83-3.72m12.08,80h-7.05l-4.73-16.62h-.33l-4.78,16.62h-7l-8.61-27.12h7.78L246.92,394h.34l4.89-17.34h6.72L263.76,394h.33l4.22-17.34h7.62Zm-125.38-104A158.06,158.06,0,1,0,300,141.74a158.05,158.05,0,0,0-158,158.05"
transform="translate(-36.96 -37.47)" />
</svg>
回答：谢谢 Temani
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.04 526.04">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circular-chart {
position: absolute;
max-width: 50%;
}
.circle {
stroke: #D8D9DB;
stroke-linecap: none;
stroke-dasharray: 2000;
stroke-dashoffset: 1000;
animation: progress 5s linear forwards infinite;
}
@keyframes progress {
from {
stroke-dashoffset: 2000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</defs>
<mask id="theMask">
<path class="circle" stroke-width="120" transform="rotate(170 263.47 263.47)" d="M263.47 24.29
a 238.73 238.73 0 0 1 0 477.47
a 238.73 238.73 0 0 1 0 -477.47" />
</mask>
<g mask="url(#theMask)">
<path id="arrow" class="cls-1"
d="M435.11,526.36c96-59.59,143.45-166.26,123.34-275.42A262.66,262.66,0,0,0,364.66,44.26C280.39,22.94,178.69,54.6,128.05,101a4.86,4.86,0,0,0-.34,6.82l23.48,26.35a4.85,4.85,0,0,0,6.77.47c67.72-57.58,160.31-70.32,241.31-28.73,72.94,37.45,123.45,114.77,117.82,208.36-2.56,42.57-16.94,81.35-42.64,115.65a214.39,214.39,0,0,1-60.65,55.55,4.87,4.87,0,0,1-6.8-1.84l-9.51-17.43a4.87,4.87,0,0,0-8.34-.34l-43.29,66.24a4.87,4.87,0,0,0,2.95,7.39c30.19,7.22,59.83,14.62,90.17,21.55a4.87,4.87,0,0,0,5.37-7c-3.9-7.34-7.68-14.34-11.06-21.44a4.87,4.87,0,0,1,1.82-6.22"
transform="translate(-36.96 -37.47)" />
<path id="dash-5" class="cls-1"
d="M47.48,244.37l33.77,9.26a4.86,4.86,0,0,0,5.9-3.15c4.28-12.74,8-25.38,13.25-37.36,5.4-12.36,12.29-24.07,18.82-36.14a4.86,4.86,0,0,0-1.48-6.27q-12.54-8.86-25-17.67c-1.16-.82-2.32-1.62-3.56-2.45a4.87,4.87,0,0,0-6.71,1.22C64,178,51.8,207.89,44.35,235.87a16.33,16.33,0,0,0-.45,3.72,4.86,4.86,0,0,0,3.58,4.78"
transform="translate(-36.96 -37.47)" />
<path id="dash-4" class="cls-1"
d="M100.32,387.08a4.84,4.84,0,0,0-7.23-2l-29.42,20.6a4.87,4.87,0,0,0-1.73,5.79c6.94,17.35,24.14,44.47,34.44,54.79a4.85,4.85,0,0,0,6.62.24l26.76-23.23a4.85,4.85,0,0,0,.6-6.72,213.18,213.18,0,0,1-30-49.45"
transform="translate(-36.96 -37.47)" />
<path id="dash-3" class="cls-1"
d="M87.53,348c-3.72-16.86-5.28-33.78-5.81-50.93a4.86,4.86,0,0,0-4.61-4.7l-34.9-1.74a4.86,4.86,0,0,0-5.1,4.7A233,233,0,0,0,45.26,366,4.87,4.87,0,0,0,52,369.09l32.83-15.64A4.85,4.85,0,0,0,87.53,348"
transform="translate(-36.96 -37.47)" />
<path id="dash-2" class="cls-1"
d="M217.77,502.08a221,221,0,0,1-45.32-25.37,4.85,4.85,0,0,0-6.8,1.09l-20.9,29.09a4.88,4.88,0,0,0,1.06,6.76,258.87,258.87,0,0,0,54.73,30.46,4.87,4.87,0,0,0,6.38-2.65l13.49-33.05a4.87,4.87,0,0,0-2.64-6.33"
transform="translate(-36.96 -37.47)" />
<path id="dash-1" class="cls-1"
d="M310.06,522.28a4.88,4.88,0,0,0-4.25-3.34l-39.25-3.1a4.85,4.85,0,0,0-5.16,4L255,554.57a4.86,4.86,0,0,0,3.77,5.65c19.51,4,38.26,3.43,57.65,3.07a4.87,4.87,0,0,0,4.59-6.21c-3.52-12.2-7.28-23.64-10.91-34.8"
transform="translate(-36.96 -37.47)" />
</g>
<path class="cls-1" d="M293.57,381.07c-3.94,0-6.05,2.61-6.88,5.67h13.05c-.05-3.83-3.33-5.67-6.17-5.67"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M329.72,284.23c9.77,0,16.58-6.17,16.58-12.59,0-4.5-4-10-14.91-10-9.12,0-17.73,3.72-24.15,7.45,3.34,9.76,12.33,15.16,22.48,15.16"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M319.08,394.85c0,2.28,1.83,3.78,4.94,3.78a10.87,10.87,0,0,0,7.33-3V393a10.09,10.09,0,0,0-6.27-1.94c-4.39,0-6,1.72-6,3.77"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M286.65,346.46c4.62,0,7.28-3.89,7.28-8.39s-2.66-8.17-7.28-8.17-7.11,3.73-7.11,8.17,2.61,8.39,7.11,8.39"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M255.21,223.2H271v73h-17.6v-56.4l-16.83,7.32L232.85,233Zm31.46,100.54c8.84,0,14.84,6.27,14.84,14.33s-6,14.5-14.84,14.5S272,346.13,272,338.07s5.95-14.33,14.72-14.33m45.11-103c13,0,23,4.24,28.27,6.55l-7.84,12.21A48.39,48.39,0,0,0,332,235.15c-13.36,0-25.31,8.48-26.21,23.51,6.94-5.4,16.19-10.41,28-10.41,19.91,0,29.93,11.95,29.93,23.39,0,15.16-14,27-33.92,27-20.68,0-40.6-12.85-40.6-37.65,0-25.31,20.3-40.21,42.53-40.21M363.1,383.67a12.89,12.89,0,0,0-3.67-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.44V384.33a41.62,41.62,0,0,0-.78-7.67h6.78a40.36,40.36,0,0,1,.55,4.06c1.67-2.78,3.61-4.94,7.12-4.94a7.69,7.69,0,0,1,4.16,1.11Zm-21.75-59.05h6.77a37.57,37.57,0,0,1,.56,4.06c1.67-2.78,3.61-4.94,7.11-4.94a7.72,7.72,0,0,1,4.17,1.11l-2.06,6.78a12.82,12.82,0,0,0-3.66-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.45V332.29a41.53,41.53,0,0,0-.77-7.67m-9,79.16a23.58,23.58,0,0,1-.66-3.11,11.79,11.79,0,0,1-9.12,3.78c-6.55,0-10.72-3.95-10.72-9.23,0-5.05,4.33-9,11.89-9a12.82,12.82,0,0,1,7.78,2.23v-2.73c0-2.83-2.44-4.11-5.72-4.11a24.55,24.55,0,0,0-9.78,2.56l-2.28-5.51a30.59,30.59,0,0,1,12.67-2.88c6.22,0,12.5,2.11,12.5,8.22v14.5a17.39,17.39,0,0,0,.78,5.28ZM307.9,342.85V324.62h7.44v17.95c0,2.11,1.84,3.78,4.5,3.78s4.67-1.72,6.23-3.5V324.62h7.39v19.45a40.89,40.89,0,0,0,.66,7.67h-6.89c-.16-.95-.27-2.45-.33-3.5a11.64,11.64,0,0,1-9.11,4.39,9.64,9.64,0,0,1-9.89-9.78m-.58,49.21H286.7a7.43,7.43,0,0,0,7.84,6.61,14.82,14.82,0,0,0,8.33-2.78l3.5,4.72a22.24,22.24,0,0,1-12.78,4c-9.17,0-14.17-6.55-14.17-14.17,0-8.22,6-14.66,14.39-14.66,6.62,0,13.62,4,13.62,14,0,.44,0,1-.11,2.28m-52.09-68.32c6.17,0,10.34,4.11,10.34,9.77v18.23h-7.45V333.79c0-2.05-1.89-3.78-4.56-3.78s-4.89,1.83-6.16,3.5v18.23H240v-38.9h7.39v14.62a11.15,11.15,0,0,1,7.83-3.72m12.08,80h-7.05l-4.73-16.62h-.33l-4.78,16.62h-7l-8.61-27.12h7.78L246.92,394h.34l4.89-17.34h6.72L263.76,394h.33l4.22-17.34h7.62Zm-125.38-104A158.06,158.06,0,1,0,300,141.74a158.05,158.05,0,0,0-158,158.05"
transform="translate(-36.96 -37.47)" />
</svg>