javascript - 如何使 svg 路径填充为进行中的动画？

Question

有什么解决方案可以在不覆盖rect的情况下将电池框red:fill显示为进度填充？

$(document).ready( function() {
   $("#iambutton").click(function () {
     console.log("hi");
    $(".mysvg").addClass( 'me' );
   });
});

.mysvg {
  text-align: center;
}
.mysvg svg {
  margin: auto;
}
.mysvg svg #loading-frame {
  fill: red;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 10s;
  transition: all 10s;
}
.mysvg.me svg #loading-frame {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="iambutton">Clik me to see progress</button>
<section class="mysvg">
  <svg width="110px" height="88px" 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 id="Rectangle-7" 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"></path>
        <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"
        id="loading-frame"></path>
      </g>
    </g>
  </svg>
</section>

Answer 1

如果您使用单一路径绘制形状会容易得多，因为您可以设置单个渐变动画来填充它。或者，您可以扩展我在下面显示的内容，使每个元素具有一个具有不同开始时间和持续时间的渐变。我只做了两个对象，如果你愿意，你可以将这个概念扩展到其他对象。如果你想要 IE 支持，请使用 fakeSmile .

$(document).ready( function() {
   $("#iambutton").click(function () {
    $("#a1")[0].beginElement();
    $("#a2")[0].beginElement();
    $("#a3")[0].beginElementAt(3);
    $("#a4")[0].beginElementAt(3);
   });
});

.mysvg {
  text-align: center;
}
.mysvg svg {
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="iambutton">Clik me to see progress</button>
<section class="mysvg">
  <svg width="110px" height="88px" 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">
    <defs>
      <linearGradient id="g1">
        <stop offset="0%" stop-color="red">
           <animate id="a1" attributeName="offset" 
             from="0%" to="100%" dur="5s" fill="freeze" begin="indefinite" />
        </stop>
        <stop offset="0%" stop-color="#EAEAEA">
           <animate id="a2" attributeName="offset" 
             from="0%" to="100%" dur="5s" fill="freeze" begin="indefinite" />
        </stop>
      </linearGradient>
      <linearGradient id="g2">
        <stop offset="0%" stop-color="red">
           <animate id="a3" attributeName="offset" 
             from="0%" to="100%" dur="1s" fill="freeze" begin="indefinite" />
        </stop>
        <stop offset="0%" stop-color="#EAEAEA">
           <animate id="a4" attributeName="offset" 
             from="0%" to="100%" dur="1s" fill="freeze" begin="indefinite" />
        </stop>
      </linearGradient>
    </defs>
          
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g id="Group" fill="#EAEAEA">
        <rect id="Brick-4"  fill="url(#g2)" 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 id="Rectangle-7" fill="url(#g1)" 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"></path>

      </g>
    </g>
  </svg>
</section>