Question

我有一个带有以下代码的svg图像：

<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>

我希望鼠标悬停时从左到右填充颜色（例如＃000）。我如何实现这一目标？

提前致谢。

Answer 1

这是通过SMIL的一种方式。 Firefox支持SMIL，适用于您可能需要的其他UA fakesmile或polyfill

＆＃13;

<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>

＆＃13;

在悬停时从起点到终点填充svg

1 个答案: