動畫從左到右填充SVG雲圖標

-1

我嘗試使用SVG云爲填充雲從左到右（有點像進度條）填充雲。這裏是雲：動畫從左到右填充SVG雲圖標

%svg{:height => "80", :version => "1.1", :viewbox => "0 0 120 80", :width => "120", :xmlns => "http://www.w3.org/2000/svg", "xmlns:figma" => "http://www.figma.com/figma/ns", "xmlns:xlink" => "http://www.w3.org/1999/xlink"} 
    %title Vector 
    %g#Canvas{"figma:type" => "canvas", :transform => "translate(1558 -2264)"} 
     %g#Vector{"figma:type" => "vector", :style => "mix-blend-mode:normal;"} 
     %use{:style => "mix-blend-mode:normal;", :transform => "translate(-1558 2264)", "xlink:href" => "#path0_fill"} 
     %use{:fill => "#FFFFFF", :style => "mix-blend-mode:normal;", :transform => "translate(-1558 2264)", "xlink:href" => "#path0_fill"} 
    %defs 
     %path#path0_fill{:d => "M 96.775 30.175C 93.375 12.975 78.2 0 60

我試圖創建一個動畫漸變，但沒有真正的工作。有沒有人有任何想法，我可以動畫這個SVG的輪廓從左到右填充給定的時間？我打開使用CSS或JS來實現它。

謝謝。

UPDATE

我相信我想通了，但頁面加載時半雲被加載。

%svg{:height => "104", :version => "1.1", :viewbox => "0 0 144 104", :width => "144", :xmlns => "http://www.w3.org/2000/svg", "xmlns:figma" => "http://www.figma.com/figma/ns", "xmlns:xlink" => "http://www.w3.org/1999/xlink"} 
    %g#Canvas{"figma:type" => "canvas", :transform => "translate(1570 -2256)"} 
    %g#ic_cloud_48px{"figma:type" => "frame", :filter => "url(#filter0_d)", :style => "mix-blend-mode:normal;"} 
     %g#Vector{"figma:type" => "vector", :style => "mix-blend-mode:normal;"} 
     %use{:fill => "#ffffff", opacity: '1', :style => "mix-blend-mode:normal;", :transform => "translate(-1558 2264)", "xlink:href" => "#path0_fill"} 
    %defs 
    %lineargradient#half_grad{x1: 0} 
     %stop{:offset => "50%", "stop-color" => "white"} 
     %stop{:offset => "50%", "stop-opacity" => "0"} 
     %animate{:attributename => "x1", :dur => "60s", :from => "-100%", :to => "100%", fill: "freeze"} 

    %filter#filter0_d{"color-interpolation-filters" => "sRGB", :filterunits => "userSpaceOnUse", :height => "104", :width => "144", :x => "-1570", :y => "2256"} 
     %feflood{"flood-opacity" => "0", :result => "BackgroundImageFix"} 
     %desc type="dropShadow" x="0" y="4" size="12" spread="0" color="0,0.498652,0.660377,0.24" blend="normal" 
     %fecolormatrix{:in => "SourceAlpha", :type => "matrix", :values => "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 0"} 
     %feoffset{:dx => "0", :dy => "4"} 
     %fegaussianblur{:stddeviation => "6"} 
     %fecolormatrix{:type => "matrix", :values => "0 0 0 0 0 0 0 0 0 0.498652 0 0 0 0 0.660377 0 0 0 0.24 0"} 
     %feblend{:in2 => "BackgroundImageFix", :mode => "normal", :result => "effect1_dropShadow"} 
     %feblend{:in => "SourceGraphic", :in2 => "effect1_dropShadow", :mode => "normal", :result => "shape"} 
    %path#path0_fill{fill: "url(#half_grad)", 'stroke-width' => "3", stroke: "white", :d => "M 96.775 30.175C 93.375 12.975 78.2 0 60 0C 45.55 0 33.025 8.2 26.75 20.175C 11.725 21.8 0 34.525 0 50C 0 66.575 13.425 80 30 80L 95 80C 108.8 80 120 68.8 120 55C 120 41.8 109.725 31.1 96.775 30.175Z"}

來源

2016-12-06 JoshL

你的錯誤是在你的線性漸變，你是如何動畫它。

%lineargradient#half_grad{x1: 0} 
    %stop{:offset => "50%", "stop-color" => "white"} 
    %stop{:offset => "50%", "stop-opacity" => "0"} 
    %animate{:attributename => "x1", :dur => "60s", :from => "-100%", :to => "100%", fill: "freeze"}

您的動畫漸變的x1高達100％，但您的梯度被定義爲橫跨半個（50％）而改變。如果您希望50％的顏色變化與雲的右側一致，則最多可以動畫200％。

即，以下是（可能）您想要的：

%animate{:attributename => "x1", :dur => "60s", :from => "0%", :to => "200%", fill: "freeze"}

來源

2016-12-06 09:04:19

謝謝。我試圖做的是從左到右緩慢地填充SVG，白色，因此有50％的偏移量。偏移量是否應該設置爲其他值來實現這種效果？ – JoshL

50％應該工作。它只是意味着要讓你的顏色開關在右側完成（100％），你需要'x1'來動畫到'200％'。 –

動畫從左到右填充SVG雲圖標

回答

相關問題