SVG私は左から私の矢印のパスのright.Theコードにある矢印をアニメーション化しようとしています与えられたパス

Question

のアニメーションを埋めるが以下の通りである：

<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'> 
 
    <g transform = "translate(0,0)"> 
 
     <path class="path" stroke="#F0F0F0" fill="#fff" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" 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>

上記は、SVGです私の矢印のパス内容。

左から右にパスを埋める方法を教えてください。

Answer 1

fill属性ではこれが可能ではないと思います。しかし代わりに、あなたのSVGパスを、穴のような三角形の四角形に反転させることができます。今度は、そのパスの後ろに2番目の要素が必要です。x方向のスケールをアニメーション化して、左から右に穴を埋めることができます。ここで

は技術を示す画像である：

ここでAnが実施例である：

<svg width="100%" height="100%" viewBox='0 0 450 400'> 
 
    <rect x="0" y="0" width="1" height="22" style="fill: black;" > 
 
    <animateTransform attributeName="transform" type="scale" from="1 1" to="50 1" begin="0s" dur="2s" repeatCount="indefinite" /> 
 
    </rect> 
 
    <path fill="#ffffff" d="M0,0v29.8h86V0H0z M6.5,25V5.5L48.8,25H6.5z"/> 
 
</svg>

注：答えはに三角形から更新されました矢印、私の答えは更新されませんテクニックはすべての形状について同じです。

Answer 2

建物andreas 'answer。あなたはそれを明らかにするためにアニメートされた形であなたの矢を覆うことができます。

<svg id="svg_circle" width="450" height="400" viewBox='0 0 450 400'> 
 
    <path class="path" stroke="#F0F0F0" fill="#fff" 
 
    stroke-width="1" opacity="1" id="svg_1" 
 
    d="m34.97813,21.70979l-33.55223,0.47088l-0.0394, 
 
     -13.57138l34.2665,-0.47295l-0.0208,-7.14282 
 
     l14.50618,14.42226l-14.95643,15.04345l-0.20382, 
 
     -8.74944z"> 
 
    <animate id="project_anim1" attributeName="fill" 
 
     from="#fff" to="#4DAF4C" begin="0s" dur="3s" 
 
     fill="freeze" repeatCount="indefinite" /> 
 
    </path> 
 
    <rect x="0" y="0" width="53" height="34" fill="#fff"> 
 
    <animate attributeType="XML" attributeName="x" 
 
     from="0" to="53" begin="0s" dur="3s" 
 
     repeatCount="indefinite" /> 
 
    <animate attributeType="XML" attributeName="width" 
 
     from="53" to="0" begin="0s" dur="3s" 
 
     repeatCount="indefinite" /> 
 
    </rect> 
 
</svg>

Answer 3

あなただけの<linear gradient>で<stop> Sをアニメーション化することによってこれを行うことができます。この仕組み

<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'> 
 

 
    <defs> 
 
    <linearGradient id="left-to-right"> 
 
     <stop offset="0" stop-color="#4DAF4C"> 
 
     <animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" /> 
 
     </stop> 
 
     <stop offset="0" stop-color="#fff"> 
 
     <animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" /> 
 
     </stop> 
 
     
 
    </linearGradient> 
 
    </defs> 
 

 
    <path class="path" stroke="#F0F0F0" fill="url(#left-to-right)" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1" /> 
 
</svg>

は、私たちが緑から白に急激な変化を表す直線勾配を持っているということです。 <animation>要素は、急激な変化の位置を矢印の左側（offset = 0）から右側（offset = "1"）に移動します。

SVG <animate>要素はIEでは動作しません。 IEをサポートする必要がある場合は、FakeSmileライブラリを使用するか、別の方法（JSアニメーションライブラリなど）を使用する必要があります。