-1
SVGクラウドを使用して、LEFTからRIGHT(進行状況バーのようなもの)のクラウドの塗りつぶしをしようとしています。ここに雲があります: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"}
ありがとうございました。私がしようとしているのは、SVGを左から右に白く塗りつぶすことです。そのため、50%のオフセットがあります。オフセットは、この効果を達成するために何かに設定する必要がありますか? – JoshL
50%で動作するはずです。これは、右側(100%)でカラースイッチが終了するようにするには、 '200% 'までアニメートするには' x1'が必要であることを意味します。 –