如何使SVG笔划破折号

Question

我试图通过使用遮罩使顶部的圆圈的stroke-dash属性动画来显示svg的箭头。下面的代码显示了它的运行情况，但是由于某些原因，它会出现很多破折号，因此它周围应该只有一个破折号，其长度从0到100笔划破折号。.有人可以告诉我我所缺少的只是从0到100的长度有短划线吗？

    <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;
                    fill: none;
                    stroke-width: 50.8;
                    stroke-linecap: round;
                    animation: progress 3s infinite;
                }
        
                @keyframes progress {
                    0% {
                        stroke-dasharray: 0 100;
                    }
        
                    99% {
                        stroke-dasharray: 100 0;
                    }
                }
            </style>
        </defs>
    
        <defs>
            <mask id="theMask">
                <path class="circle" stroke-dasharray="0, 100" d="M253.47 119.78
                   a 143.24 143.24 0 0 1 0 286.48
                   a 143.24 143.24 0 0 1 0 -286.48" />
            </mask>
        </defs>
    
        <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)" />
            <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)" />
        </g>
    
    </svg>

Answer 1

尝试

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

    99% {
        stroke-dasharray: 1000 0;
    }
}

数字1000是指路径的长度，而不是填充的百分比，因此您希望它等于圆的长度。值为100时，每100个单位会产生一个破折号。

Answer 2

您的路径相当不规则，但是形状的半径约为244个单位。因此，其总长度约为1533个单位。如果您想使其更简单，可以使用圆圈作为蒙版。如果这样做，则需要对其进行旋转，以使其开始于您想要的位置：

<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;
                    fill: none;
                    stroke-width: 115.8;
                    stroke-linecap: round;
                    animation: progress 3s infinite;
                }
        
                @keyframes progress {
                    0% {
                        stroke-dasharray: 0 1533;
                    }
        
                    99% {
                        stroke-dasharray: 1533 0;
                    }
                }
            </style>
        </defs>
    
        <defs>
            <mask id="theMask">
              <circle class="circle" cx="264" cy="264" r="244" transform="rotate(95, 264, 264)" />  
              
            </mask>
        </defs>
    
        <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)" />
            <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)" />
        </g>
    
    </svg>

Answer 3

如果我的理解正确，您想制作一个箭头动画以及一条从零到最大长度的增长线。

要实现此想法，您可以组合两个动画：

• 第一个动画是线从零增长到最大值的动画 将笔划破折号从零更改为最大值。

<!-- Circle drawing animation from zero to 100%  -->
    <animate
      attributeName="stroke-dasharray"
      begin="svg1.click"
      dur="8s"
      values="0 1508; 1508 0"
      fill="freeze" />

点击SVG画布后，动画开始。

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" width="50%" height="50%" viewBox="0 0 526 526" version="1.1" style="border:1px solid gray">
  <defs>
    <style>
           
                .cls-1 {
                    fill: #2b2b2a;
                }
                
                 
                .circle {
                    fill: none;
					stroke: #2B2B2A;
                    stroke-width: 26;
					stroke-linecap: round;
                    stroke-dasharray: 0,1508;
                }
				 .circle_trace {
                    fill: none;
					stroke: #EDEDED;
                    stroke-width: 26;
                    
                }
        
                    
    
    </style>  
	
  </defs>
<g id="logo">  
  <path class="cls-1" d="M293.6 381.1c-3.9 0-6 2.6-6.9 5.7h13.1c0-3.8-3.3-5.7-6.2-5.7" transform="translate(-36.96 -37.47)"/>
  <path class="cls-1" d="M329.7 284.2c9.8 0 16.6-6.2 16.6-12.6 0-4.5-4-10-14.9-10-9.1 0-17.7 3.7-24.1 7.5 3.3 9.8 12.3 15.2 22.5 15.2" transform="translate(-36.96 -37.47)"/>
  <path class="cls-1" d="M319.1 394.9c0 2.3 1.8 3.8 4.9 3.8a10.9 10.9 0 0 0 7.3-3V393a10.1 10.1 0 0 0-6.3-1.9c-4.4 0-6 1.7-6 3.8" transform="translate(-36.96 -37.47)"/>
  <path class="cls-1" d="M286.7 346.5c4.6 0 7.3-3.9 7.3-8.4s-2.7-8.2-7.3-8.2-7.1 3.7-7.1 8.2 2.6 8.4 7.1 8.4" transform="translate(-36.96 -37.47)"/>
  <path class="cls-1" d="M255.2 223.2H271v73h-17.6v-56.4l-16.8 7.3L232.9 233Zm31.5 100.5c8.8 0 14.8 6.3 14.8 14.3s-6 14.5-14.8 14.5S272 346.1 272 338.1s6-14.3 14.7-14.3m45.1-103c13 0 23 4.2 28.3 6.6l-7.8 12.2A48.4 48.4 0 0 0 332 235.2c-13.4 0-25.3 8.5-26.2 23.5 6.9-5.4 16.2-10.4 28-10.4 19.9 0 29.9 12 29.9 23.4 0 15.2-14 27-33.9 27-20.7 0-40.6-12.8-40.6-37.6 0-25.3 20.3-40.2 42.5-40.2M363.1 383.7a12.9 12.9 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V384.3a41.6 41.6 0 0 0-0.8-7.7h6.8a40.4 40.4 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1Zm-21.7-59h6.8a37.6 37.6 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1l-2.1 6.8a12.8 12.8 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V332.3a41.5 41.5 0 0 0-0.8-7.7m-9 79.2a23.6 23.6 0 0 1-0.7-3.1 11.8 11.8 0 0 1-9.1 3.8c-6.5 0-10.7-3.9-10.7-9.2 0-5 4.3-9 11.9-9a12.8 12.8 0 0 1 7.8 2.2v-2.7c0-2.8-2.4-4.1-5.7-4.1a24.6 24.6 0 0 0-9.8 2.6l-2.3-5.5a30.6 30.6 0 0 1 12.7-2.9c6.2 0 12.5 2.1 12.5 8.2v14.5a17.4 17.4 0 0 0 0.8 5.3ZM307.9 342.9V324.6h7.4v18c0 2.1 1.8 3.8 4.5 3.8s4.7-1.7 6.2-3.5V324.6h7.4v19.5a40.9 40.9 0 0 0 0.7 7.7h-6.9c-0.2-0.9-0.3-2.4-0.3-3.5a11.6 11.6 0 0 1-9.1 4.4 9.6 9.6 0 0 1-9.9-9.8m-0.6 49.2H286.7a7.4 7.4 0 0 0 7.8 6.6 14.8 14.8 0 0 0 8.3-2.8l3.5 4.7a22.2 22.2 0 0 1-12.8 4c-9.2 0-14.2-6.5-14.2-14.2 0-8.2 6-14.7 14.4-14.7 6.6 0 13.6 4 13.6 14 0 0.4 0 1-0.1 2.3m-52.1-68.3c6.2 0 10.3 4.1 10.3 9.8v18.2h-7.4V333.8c0-2-1.9-3.8-4.6-3.8s-4.9 1.8-6.2 3.5v18.2H240v-38.9h7.4v14.6a11.2 11.2 0 0 1 7.8-3.7m12.1 80h-7l-4.7-16.6h-0.3l-4.8 16.6h-7l-8.6-27.1h7.8L246.9 394h0.3l4.9-17.3h6.7L263.8 394h0.3l4.2-17.3h7.6Zm-125.4-104A158.1 158.1 0 1 0 300 141.7a158.1 158.1 0 0 0-158 158.1" transform="translate(-36.96 -37.47)"/>
</g> 
   <!-- Circle trace -->
 <path  class="circle_trace"  d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
 <!-- Circle -->
 <path id="circ" class="circle"  d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z">
   
   <!-- Circle drawing animation from zero to 100%  -->
    <animate
	  attributeName="stroke-dasharray"
	  begin="svg1.click"
	  dur="5s"
	  values="0 1508; 1508 0"
	  fill="freeze" />
 </path>
     
 
  
</svg>

• 第二个动画是使用 命令animateMotion

<animateMotion
   id="an"
   dur="5s"
   repeatCount="indefinite"
   rotate="auto-reverse"
   begin="svg1.click"
   fill="freeze"
   restart="whenNotActive">
       <mpath xlink:href="#circ"/>
</animateMotion>  

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" width="50%" height="50%" viewBox="0 0 526 526" version="1.1" style="border:1px solid gray">
  <defs>
    <style>
           
                .cls-1 {
                    fill: #2b2b2a;
                }
                
                 
                .circle {
                    fill: none;
					stroke: #2B2B2A;
                    stroke-width: 26;
                    stroke-dasharray: 0,1508;
                }
				 .circle_trace {
                    fill: none;
					stroke: #EDEDED;
                    stroke-width: 26;
                    
                }
                     
    
    </style>  
	
  </defs>
<g id="logo">  
  <path class="cls-1" d="M293.6 381.1c-3.9 0-6 2.6-6.9 5.7h13.1c0-3.8-3.3-5.7-6.2-5.7" transform="translate(-36.96 -37.47)"/>
  <path class="cls-1" d="M329.7 284.2c9.8 0 16.6-6.2 16.6-12.6 0-4.5-4-10-14.9-10-9.1 0-17.7 3.7-24.1 7.5 3.3 9.8 12.3 15.2 22.5 15.2" transform="translate(-36.96 -37.47)"/>
  <path class="cls-1" d="M319.1 394.9c0 2.3 1.8 3.8 4.9 3.8a10.9 10.9 0 0 0 7.3-3V393a10.1 10.1 0 0 0-6.3-1.9c-4.4 0-6 1.7-6 3.8" transform="translate(-36.96 -37.47)"/>
  <path class="cls-1" d="M286.7 346.5c4.6 0 7.3-3.9 7.3-8.4s-2.7-8.2-7.3-8.2-7.1 3.7-7.1 8.2 2.6 8.4 7.1 8.4" transform="translate(-36.96 -37.47)"/>
  <path class="cls-1" d="M255.2 223.2H271v73h-17.6v-56.4l-16.8 7.3L232.9 233Zm31.5 100.5c8.8 0 14.8 6.3 14.8 14.3s-6 14.5-14.8 14.5S272 346.1 272 338.1s6-14.3 14.7-14.3m45.1-103c13 0 23 4.2 28.3 6.6l-7.8 12.2A48.4 48.4 0 0 0 332 235.2c-13.4 0-25.3 8.5-26.2 23.5 6.9-5.4 16.2-10.4 28-10.4 19.9 0 29.9 12 29.9 23.4 0 15.2-14 27-33.9 27-20.7 0-40.6-12.8-40.6-37.6 0-25.3 20.3-40.2 42.5-40.2M363.1 383.7a12.9 12.9 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V384.3a41.6 41.6 0 0 0-0.8-7.7h6.8a40.4 40.4 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1Zm-21.7-59h6.8a37.6 37.6 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1l-2.1 6.8a12.8 12.8 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V332.3a41.5 41.5 0 0 0-0.8-7.7m-9 79.2a23.6 23.6 0 0 1-0.7-3.1 11.8 11.8 0 0 1-9.1 3.8c-6.5 0-10.7-3.9-10.7-9.2 0-5 4.3-9 11.9-9a12.8 12.8 0 0 1 7.8 2.2v-2.7c0-2.8-2.4-4.1-5.7-4.1a24.6 24.6 0 0 0-9.8 2.6l-2.3-5.5a30.6 30.6 0 0 1 12.7-2.9c6.2 0 12.5 2.1 12.5 8.2v14.5a17.4 17.4 0 0 0 0.8 5.3ZM307.9 342.9V324.6h7.4v18c0 2.1 1.8 3.8 4.5 3.8s4.7-1.7 6.2-3.5V324.6h7.4v19.5a40.9 40.9 0 0 0 0.7 7.7h-6.9c-0.2-0.9-0.3-2.4-0.3-3.5a11.6 11.6 0 0 1-9.1 4.4 9.6 9.6 0 0 1-9.9-9.8m-0.6 49.2H286.7a7.4 7.4 0 0 0 7.8 6.6 14.8 14.8 0 0 0 8.3-2.8l3.5 4.7a22.2 22.2 0 0 1-12.8 4c-9.2 0-14.2-6.5-14.2-14.2 0-8.2 6-14.7 14.4-14.7 6.6 0 13.6 4 13.6 14 0 0.4 0 1-0.1 2.3m-52.1-68.3c6.2 0 10.3 4.1 10.3 9.8v18.2h-7.4V333.8c0-2-1.9-3.8-4.6-3.8s-4.9 1.8-6.2 3.5v18.2H240v-38.9h7.4v14.6a11.2 11.2 0 0 1 7.8-3.7m12.1 80h-7l-4.7-16.6h-0.3l-4.8 16.6h-7l-8.6-27.1h7.8L246.9 394h0.3l4.9-17.3h6.7L263.8 394h0.3l4.2-17.3h7.6Zm-125.4-104A158.1 158.1 0 1 0 300 141.7a158.1 158.1 0 0 0-158 158.1" transform="translate(-36.96 -37.47)"/>
</g> 
   <!-- Circle trace -->
 <path  class="circle_trace"  d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
 <!-- Circle -->
 <path id="circ" class="circle"  d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
   
   

        <!-- the Arrow -->
   <polyline id="pol" transform="translate(7 -25) rotate(90)" fill-opacity="1" points="0,0 25,43.3 50,0" fill="#2B2B2A" >
      <!-- Arrow motion animation -->
 <animateMotion
   id="an"
   dur="5s"
   repeatCount="indefinite"
   rotate="auto-reverse"
   begin="svg1.click"
   fill="freeze"
   restart="whenNotActive">
       <mpath xlink:href="#circ"/>
</animateMotion>  
    
</polyline>	

 
  
</svg>

我们通过为两个动画设置相同的开始时间和相同的执行时间来组合两个动画

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" width="50%" height="50%" viewBox="0 0 526 526" version="1.1" style="border:1px solid gray">
  <defs>
    <style>
           
       .cls-1 {
         fill: #2b2b2a;
              }
       .circle {
          fill: none;
					stroke: #2B2B2A;
          stroke-width: 26;
          stroke-dasharray: 0,1508;
                }
				 .circle_trace {
          fill: none;
					stroke: #EDEDED;
          stroke-width: 26;
                 }
     </style>  
 </defs>
<g id="logo">  
  <path class="cls-1" d="M293.6 381.1c-3.9 0-6 2.6-6.9 5.7h13.1c0-3.8-3.3-5.7-6.2-5.7" transform="translate(-36.96 -37.47)"/>
  <path class="cls-1" d="M329.7 284.2c9.8 0 16.6-6.2 16.6-12.6 0-4.5-4-10-14.9-10-9.1 0-17.7 3.7-24.1 7.5 3.3 9.8 12.3 15.2 22.5 15.2" transform="translate(-36.96 -37.47)"/>
  <path class="cls-1" d="M319.1 394.9c0 2.3 1.8 3.8 4.9 3.8a10.9 10.9 0 0 0 7.3-3V393a10.1 10.1 0 0 0-6.3-1.9c-4.4 0-6 1.7-6 3.8" transform="translate(-36.96 -37.47)"/>
  <path class="cls-1" d="M286.7 346.5c4.6 0 7.3-3.9 7.3-8.4s-2.7-8.2-7.3-8.2-7.1 3.7-7.1 8.2 2.6 8.4 7.1 8.4" transform="translate(-36.96 -37.47)"/>
  <path class="cls-1" d="M255.2 223.2H271v73h-17.6v-56.4l-16.8 7.3L232.9 233Zm31.5 100.5c8.8 0 14.8 6.3 14.8 14.3s-6 14.5-14.8 14.5S272 346.1 272 338.1s6-14.3 14.7-14.3m45.1-103c13 0 23 4.2 28.3 6.6l-7.8 12.2A48.4 48.4 0 0 0 332 235.2c-13.4 0-25.3 8.5-26.2 23.5 6.9-5.4 16.2-10.4 28-10.4 19.9 0 29.9 12 29.9 23.4 0 15.2-14 27-33.9 27-20.7 0-40.6-12.8-40.6-37.6 0-25.3 20.3-40.2 42.5-40.2M363.1 383.7a12.9 12.9 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V384.3a41.6 41.6 0 0 0-0.8-7.7h6.8a40.4 40.4 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1Zm-21.7-59h6.8a37.6 37.6 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1l-2.1 6.8a12.8 12.8 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V332.3a41.5 41.5 0 0 0-0.8-7.7m-9 79.2a23.6 23.6 0 0 1-0.7-3.1 11.8 11.8 0 0 1-9.1 3.8c-6.5 0-10.7-3.9-10.7-9.2 0-5 4.3-9 11.9-9a12.8 12.8 0 0 1 7.8 2.2v-2.7c0-2.8-2.4-4.1-5.7-4.1a24.6 24.6 0 0 0-9.8 2.6l-2.3-5.5a30.6 30.6 0 0 1 12.7-2.9c6.2 0 12.5 2.1 12.5 8.2v14.5a17.4 17.4 0 0 0 0.8 5.3ZM307.9 342.9V324.6h7.4v18c0 2.1 1.8 3.8 4.5 3.8s4.7-1.7 6.2-3.5V324.6h7.4v19.5a40.9 40.9 0 0 0 0.7 7.7h-6.9c-0.2-0.9-0.3-2.4-0.3-3.5a11.6 11.6 0 0 1-9.1 4.4 9.6 9.6 0 0 1-9.9-9.8m-0.6 49.2H286.7a7.4 7.4 0 0 0 7.8 6.6 14.8 14.8 0 0 0 8.3-2.8l3.5 4.7a22.2 22.2 0 0 1-12.8 4c-9.2 0-14.2-6.5-14.2-14.2 0-8.2 6-14.7 14.4-14.7 6.6 0 13.6 4 13.6 14 0 0.4 0 1-0.1 2.3m-52.1-68.3c6.2 0 10.3 4.1 10.3 9.8v18.2h-7.4V333.8c0-2-1.9-3.8-4.6-3.8s-4.9 1.8-6.2 3.5v18.2H240v-38.9h7.4v14.6a11.2 11.2 0 0 1 7.8-3.7m12.1 80h-7l-4.7-16.6h-0.3l-4.8 16.6h-7l-8.6-27.1h7.8L246.9 394h0.3l4.9-17.3h6.7L263.8 394h0.3l4.2-17.3h7.6Zm-125.4-104A158.1 158.1 0 1 0 300 141.7a158.1 158.1 0 0 0-158 158.1" transform="translate(-36.96 -37.47)"/>
</g> 
   <!-- Circle trace -->
 <path  class="circle_trace"  d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
 <!-- Circle -->
 <path id="circ" class="circle"  d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z">
   
   <!-- Circle drawing animation from zero to 100%  -->
    <animate attributeName="stroke-dasharray" begin="svg1.click" dur="8s" values="0 1508; 1508 0" fill="freeze" />
 </path>
        <!-- the Arrow -->
   <polyline id="pol" transform="translate(7 -25) rotate(90)" fill-opacity="1" points="0,0 25,43.3 50,0" fill="#2B2B2A" >
      <!-- Arrow motion animation -->
 <animateMotion
   id="an"
   dur="8s"
   repeatCount="1"
   rotate="auto-reverse"
   begin="svg1.click"
   fill="freeze"
   restart="whenNotActive">
       <mpath xlink:href="#circ"/>
</animateMotion>  
    <!-- Arrow disappearance animation -->
    <set attributeName="fill-opacity" to="0" begin="an.end"  />  
</polyline>	

 
  
</svg>