は、私は次のコードでSVG画像持つホバー

Question

上の終点にポイントを開始からSVGを入力します（。例えば＃000）私はそれが色で塗りつぶされたい

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="292.686px" height="129.889px" viewBox="0 0 292.686 129.889" enable-background="new 0 0 292.686 129.889" xml:space="preserve"> 
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M286.006,121.184c-2.225-2.903-4.485-5.775-6.754-8.639l-6.791-8.605 l-6.841-8.561l-6.883-8.523l-6.913-8.496l-6.944-8.469l-6.982-8.435l-2.951-3.565l-3.818,3.201l-9.605,8.052l-9.57,8.089 l-9.539,8.125l-3.652,3.123l-8.584-14.747L177.734,52.64l-12.563-21.02l-12.673-20.953L146.046,0l-6.388,10.785 c-3.595,6.069-7.122,12.177-10.667,18.273c-3.535,6.104-7.109,12.184-10.601,18.313l-10.522,18.357l-5.771,10.202l-4.322-4.796 L86.943,59.189l-5.303-5.849l-4.377,6.203c-4.797,6.797-9.633,13.566-14.382,20.399L55.73,90.171l-3.486,5.044l-3.296-4.443 l-7.332-9.809l-3.025-4.048l-2.817,3.784l-9.074,12.19c-3.005,4.08-6.028,8.144-8.991,12.258l-8.926,12.312 c-2.927,4.144-5.899,8.25-8.782,12.431c3.55-3.631,7.01-7.336,10.516-11.003l10.372-11.121c3.47-3.697,6.878-7.444,10.307-11.175 l6.847-7.53l3.985,6.43l6.488,10.383l3.381,5.41l4.229-5.245l7.836-9.717l7.782-9.758c3.569-4.451,7.1-8.932,10.629-13.414 l5.479,6.598l10.34,12.374l6.09,7.288l5.031-8.322l10.947-18.109l10.844-18.171c3.631-6.047,7.179-12.143,10.766-18.215 c1.469-2.496,2.939-4.991,4.408-7.487l6.278,10.209l12.937,20.792l13.057,20.719l13.179,20.645l4.184,6.554l5.426-5.152l9.085-8.628 l9.07-8.645l9.039-8.681l5.688-5.508l4.153,4.3l7.645,7.843l7.675,7.815l7.705,7.788l7.748,7.75l7.797,7.706 c2.594,2.573,5.196,5.139,7.834,7.673c2.628,2.543,5.246,5.094,7.909,7.606C290.486,126.963,288.241,124.078,286.006,121.184z"/> 
</svg> 

をマウスのホバーに、から左から右。これをどのように達成するのですか？

ありがとうございます。

Answer 1

ここにはSMIL経由の方法があります。 FirefoxはSMILをサポートし、他のUAのためにあなたがfakesmileまたはpolyfill

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    width="292.686px" height="129.889px" viewBox="0 0 292.686 129.889"> 
 
    <defs> 
 
     <linearGradient id="grad" x1="0%" x2="100%"> 
 
      <stop offset="0%" stop-color="#000" stop-opacity="1"> 
 
       <animate attributeName="offset" dur="1s" begin="r.mouseover" to="100%" fill="freeze"/> 
 
       <animate attributeName="offset" dur="1s" begin="r.mouseout" to="0%" fill="freeze"/> 
 
      </stop> 
 
      <stop offset="0%" stop-color="#000" stop-opacity="0"> 
 
       <animate attributeName="offset" dur="1s" begin="r.mouseover" to="100%" fill="freeze"/> 
 
       <animate attributeName="offset" dur="1s" begin="r.mouseout" to="0%" fill="freeze"/> 
 
      </stop> 
 
     </linearGradient> 
 
    </defs> 
 
    <rect id="r" width="100%" height="100%" fill="url(#grad)"/> 
 
</svg>