我有一個SVG與多個路徑,我試圖給動畫的填充。我的目標是製作一個動畫,在每條路徑中以不同的顏色從底部到頂部緩慢地填充顏色。動畫SVG路徑填充自下而上
我曾嘗試玩lineargradient,但無法弄清楚如何使用它與路徑。
我創建了以下SVG:
https://jsfiddle.net/812x1tqu/
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 148 148" style="enable-background:new 0 0 148 148;" xml:space="preserve">
<style type="text/css">
.st0{fill:#0000FF;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#FF00FF;stroke:#000000;stroke-miterlimit:10;}
</style>
<g id="XMLID_1_">
<path id="XMLID_4_" class="st0" d="M147.4,71.3L0.8,67.3c-0.2,2.2-0.3,4.4-0.3,6.7c0,40.6,32.9,73.5,73.5,73.5s73.5-32.9,73.5-73.5
C147.5,73.1,147.5,72.2,147.4,71.3z"/>
<path id="XMLID_3_" class="st1" d="M74,0.5C35.7,0.5,4.2,29.8,0.8,67.3l146.6,4.1C146.1,32,113.7,0.5,74,0.5z"/>
</g>
</svg>
所以藍色會慢慢的從底部填充它的頂部,然後粉色將從底部開始到頂部爲好。
**編輯:我發現下面的例子 - 但是我的如上所述具有路徑,以便需要大約一個工作,如果可能的
https://jsfiddle.net/ppy2ggpL/
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
<stop offset="40%" stop-opacity="1" stop-color="royalblue">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
</stop>
<stop offset="40%" stop-opacity="0" stop-color="royalblue">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
</linearGradient>
<circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
</svg>
謝謝。
您需要剪貼蒙版和我懷疑的動畫背景元素。以這種方式「填充」不是可動畫的。 –