Svg 경로로 애니메이션 채우기

Question

나는 원과 비슷한 경로가 있습니다. 작업은 애니메이션으로 패스로 패스를 채우는 것입니다. 채우기 애니메이션은 위에서 아래로 또는 아래에서 위로가 아닌 원형으로 이루어져야합니다.

내 SVG 코드는 다음과 같습니다

<svg id="svg_circle" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox = '0 0 450 400'> 
 
    <g class="svg_circle" transform = "translate(0,0)"> 
 
     <path class="path" stroke="#F0F0F0" fill="#fff" stroke-width="1" opacity="1" d="m-0.25,238.11061l88.59461,-82.21665l87.56445,86.40604l-33.99561,0.52367c2.72107,17.03346 46.55824,67.96739 105.37633,63.99055c70.95792,-4.79765 101.17847,-64.19902 103.74816,-97.50561c7.13262,-92.44812 -81.66575,-121.29229 -115.80064,-115.90062c-119.13463,18.8176 -96.38311,112.29843 -96.38311,112.29843l-50.54082,-49.76652l-46.48973,43.1249c-12.30406,-104.7234 83.23188,-194.53124 191.25985,-198.17803c97.87838,-3.30416 202.62703,53.17701 213.76024,178.57248c16.06879,180.98587 -165.14043,220.64431 -208.6094,218.37164c-143.15297,-7.48456 -189.38275,-115.91408 -199.33787,-158.14925l-39.14646,-1.57102z" id="svg_1"> 
 
      <animate id="project_anim1" attributeName="fill" from="#fff" to="#4DAF4C" begin="1s" dur="1s" fill="freeze" repeatCount="1"></animate> 
 
     </path> 
 
    </g> 
 
</svg>

빠른 응답이 도움을 주시기 바랍니다가 필요합니다.

Answer 1

화살표 모양을 마스크로 사용하여 일반적인 "dasharray"선 그리기 기법이 도움이 될 것입니다. 당신의 화살표 모양의 머리가 꼬리를 겹쳐 있기 때문에

This technique is described in this SO question

그러나,는 "완벽한"결과를 얻을, 당신은 두 부분으로 스윕을 분할 할 수 있습니다. 꼬리 부분을 꼬리 부분 마스크로 그린 다음 모양의 두 번째 부분 (화살표 머리 부분 포함)을 별도의 마스크로 그립니다.

다음은이 기술을 보여주는 거친 불완전한 버전입니다.

<svg id="svg_circle" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox = '0 0 450 400'> 
 
    <defs> 
 
    <path id="arrow" stroke="#F0F0F0" fill="none" stroke-width="1" opacity="1" d="m-0.25,238.11061l88.59461,-82.21665l87.56445,86.40604l-33.99561,0.52367c2.72107,17.03346 46.55824,67.96739 105.37633,63.99055c70.95792,-4.79765 101.17847,-64.19902 103.74816,-97.50561c7.13262,-92.44812 -81.66575,-121.29229 -115.80064,-115.90062c-119.13463,18.8176 -96.38311,112.29843 -96.38311,112.29843l-50.54082,-49.76652l-46.48973,43.1249c-12.30406,-104.7234 83.23188,-194.53124 191.25985,-198.17803c97.87838,-3.30416 202.62703,53.17701 213.76024,178.57248c16.06879,180.98587 -165.14043,220.64431 -208.6094,218.37164c-143.15297,-7.48456 -189.38275,-115.91408 -199.33787,-158.14925l-39.14646,-1.57102z" id="svg_1"/> 
 
    <clipPath id="arrow-clip" clipPathUnits="userSpaceOnUse"> 
 
     <use xlink:href="#arrow"/> 
 
    </clipPath> 
 
    </defs> 
 

 
    <g clip-path="url(#arrow-clip)"> 
 
    <circle cx="244" cy="200" r="158" transform="rotate(-164,244,200)" 
 
      fill="none" stroke="#4DAF4C" stroke-width="175" 
 
      stroke-dasharray="993 993"> 
 
     <animate attributeName="stroke-dashoffset" from="993" to="0" begin="1s" dur="1s" fill="freeze" repeatCount="1"/> 
 
    </circle> 
 
    </g> 
 
    <use xlink:href="#arrow"/> 
 
</svg>

는 여기서 우리는 정말 두꺼운 녹색 선 애니메이션,하지만 당신이 원하는 모양을 준수 있도록 클리핑 패스로 모양을 사용하고 있습니다.

그러나 앞서 언급했듯이 머리가 꼬리 끝에 겹치는 부분은 완벽하지 않으므로 위에서 설명한대로 두 부분으로 애니메이션을 분할해야 할 수 있습니다.