2

是否有任何解决方案可以将电池框架显示red:fill为进度填充而不覆盖rect？

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

4

3 回答 3

2

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

于 2015-10-19T13:20:01.473 回答
1

稍微改变一下你的 SVG 就可以让它工作。

与其rect用来制作电池电量，不如让它们作为电池中的“孔”，这样您就可以rect在它下面设置动画，它看起来就像是在填充电量。

像这样的东西：

$(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="loading-frame" x="0" y="0" width="110" height="88" fill="red" />
   <path d="M0 0 h110 v88 h-110z
M77.5 10 h13.5 v68 h-13.5z
M56 10 h13.5 v68 h-13.5z
M34.5 10 h13.5 v68 h-13.5z
M13 10 h13.5 v68 h-13.5z" fill="black" />
  </g>
</g>
  </svg>
</section>

单击后等待几秒钟，您将看到白色区域被红色填充。

很抱歉，非常简单的 SVG，但是重新绘制整个电池需要更多时间，您可以在如何在 SVG 矩形中切割一个洞中看到更多关于这种制作“洞”的方法

于 2015-10-19T13:01:35.080 回答
0

您可以在 javascript 文件中创建如下函数：

$(document).ready( function() {
   $("#iambutton").clickenter code here(function () {
     console.log("hi");
    $(".mysvg").addClass( 'me' );
    document.getElementByID('mysvg').fill('red')
   });
});
于 2015-10-19T12:24:51.290 回答