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”線條繪制技術。

該技術問題對此技術進行了描述

但是，由於箭頭形狀的頭部與尾部重疊，因此要獲得“完美”的效果，可能必須將掃掠分為兩部分。 您將使用尾部蒙版繪制尾部，然后使用單獨的蒙版繪制形狀的后半部分（包括箭頭）。

這是顯示該技術的不完美版本。

 <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> 

在這里，我們為一條非常粗的綠線設置了動畫，但是將您的形狀用作剪切路徑，使其符合您想要的形狀。

但是正如我提到的，頭部與尾巴末端重疊的部分並不完美，因此您可能需要如上所述將動畫分為兩部分。