SVG <animate> 从 0 开始的偏移量不起作用

Question

动画的目的是填充背景颜色作为加载电池。在我看来，解决方案显示为正在加载的苹果渐变动画。但是在当前的 SVG linearGradient 动画中，属性 offset="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>

Answer 1

将代码改成这个

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

希望对您有所帮助

SVG <animate> 从 0 开始的偏移量不起作用

SVG <animate> offset from 0 not working

css

svg

linear-gradients

offset

svg-animate