SVG <animate>从0偏移不起作用

动画的目的是将背景颜色填充为加载电池。解决方案似乎对我来说苹果渐变动画显示为加载。但是在目前的SVG的LinearGradient动画不工作时，属性offset="0%"SVG <animate>从0偏移不起作用

div { 
 
    float: left; 
 
    width: 50%; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
}

<div> 
 
    <p><small>offset from 0%</small> <strong>not working</strong></p> 
 
    <svg viewBox="0 0 110 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mysvg"> 
 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
     <g id="Group" fill="#EAEAEA"> 
 
     <rect id="Brick-4" x="77.5" y="10" width="13.5" height="68" rx="3"></rect> 
 
     <rect id="Brick-3" x="56" y="10" width="13.5" height="68" rx="3"></rect> 
 
     <rect id="Brick-2" x="34.5" y="10" width="13.5" height="68" rx="3"></rect> 
 
     <rect id="Brick-1" x="13" y="10" width="13.5" height="68" rx="3"></rect> 
 
     <path d="M104,30.2724875 C104.164709,30.2576038 104.331485,30.25 104.5,30.25 C107.537566,30.25 110,32.7220822 110,35.7458573 L110,53.1708094 C110,56.2060875 107.531385,58.6666667 104.5,58.6666667 C104.331455,58.6666667 104.164681,58.6590557 104,58.6441617 L104,82.0033234 C104,85.3151964 101.311488,88 97.9970362,88 L6.0029638,88 C2.68761844,88 0,85.3182852 0,82.0033234 L0,5.99667663 C0,2.68480358 2.68851188,0 6.0029638,0 L97.9970362,0 C101.312382,0 104,2.68171476 104,5.99667663 L104,30.2724875 L104,30.2724875 Z M5,10.991014 C5,7.68226832 7.68678744,5 11.0051618,5 L92.9948382,5 C96.3113975,5 99,7.68493655 99,10.991014 L99,77.008986 C99,80.3177317 96.3132126,83 92.9948382,83 L11.0051618,83 C7.68860254,83 5,80.3150634 5,77.008986 L5,10.991014 Z" 
 
     fill="url(#fromzero) 
 
     "></path> 
 
     <defs> 
 
      <linearGradient id="fromzero" x1="0"> 
 
      <stop offset="0%" stop-color="#4c7eaf"></stop> 
 
      <stop offset="0%" stop-color="#828282"></stop> 
 
      <animate attributeName="x1" dur="5s" from="0%" to="100%" repeatCount="indefinite" /> 
 
      </linearGradient> 
 
     </defs> 
 
     </g> 
 
    </g> 
 
    </svg> 
 
</div> 
 
<div> 
 
    <p><small>offset from 1%</small> <strong>working</strong></p> 
 
    <svg viewBox="0 0 110 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mysvg"> 
 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
     <g id="Group" fill="#EAEAEA"> 
 
     <rect id="Brick-4" x="77.5" y="10" width="13.5" height="68" rx="3"></rect> 
 
     <rect id="Brick-3" x="56" y="10" width="13.5" height="68" rx="3"></rect> 
 
     <rect id="Brick-2" x="34.5" y="10" width="13.5" height="68" rx="3"></rect> 
 
     <rect id="Brick-1" x="13" y="10" width="13.5" height="68" rx="3"></rect> 
 
     <path d="M104,30.2724875 C104.164709,30.2576038 104.331485,30.25 104.5,30.25 C107.537566,30.25 110,32.7220822 110,35.7458573 L110,53.1708094 C110,56.2060875 107.531385,58.6666667 104.5,58.6666667 C104.331455,58.6666667 104.164681,58.6590557 104,58.6441617 L104,82.0033234 C104,85.3151964 101.311488,88 97.9970362,88 L6.0029638,88 C2.68761844,88 0,85.3182852 0,82.0033234 L0,5.99667663 C0,2.68480358 2.68851188,0 6.0029638,0 L97.9970362,0 C101.312382,0 104,2.68171476 104,5.99667663 L104,30.2724875 L104,30.2724875 Z M5,10.991014 C5,7.68226832 7.68678744,5 11.0051618,5 L92.9948382,5 C96.3113975,5 99,7.68493655 99,10.991014 L99,77.008986 C99,80.3177317 96.3132126,83 92.9948382,83 L11.0051618,83 C7.68860254,83 5,80.3150634 5,77.008986 L5,10.991014 Z" 
 
     fill="url(#fromone) 
 
     "></path> 
 
     <defs> 
 
      <linearGradient id="fromone" x1="0"> 
 
      <stop offset="1%" stop-color="#4c7eaf"></stop> 
 
      <stop offset="1%" stop-color="#828282"></stop> 
 
      <animate attributeName="x1" dur="5s" from="0%" to="100%" repeatCount="indefinite" /> 
 
      </linearGradient> 
 
     </defs> 
 
     </g> 
 
    </g> 
 
    </svg> 
 
</div>

来源

2015-10-20 Muhammed

Chaning代码本

<linearGradient id="fromzero" x1="0"> 
    <stop offset="50%" stop-color="#4c7eaf"></stop> 
    <stop offset="50%" stop-color="#828282"></stop> 
    <animate attributeName="x1" dur="5s" from="-100%" to="100%" repeatCount="indefinite" /> 
</linearGradient>

使得梯度在两种颜色分割的背景色，并将其从-100％移至100％，从而可以从0％降至100％，同时赋予它完全相同的效果。

我现在还添加了你想要的动画。点击svg元素即可触发。

下面是结果的Fiddle

希望这有助于

来源

2015-10-20 08:15:33

谢谢您的调整方案。你认为我们可以在点击按钮时应用动画吗？ – Muhammed

我已经告诉你如何做到这一点：http://stackoverflow.com/a/33215544/1038015 –

编辑我的答案。它现在是动画 –

SVG <animate>从0偏移不起作用

回答

相关问题