如何将svg路径填充为进度动画？

时间：2015-10-19 12:16:07

标签： javascript css css3 svg svg-path

是否有任何解决方案可以在不覆盖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>

3 个答案:

答案 0 :(得分：2)

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

＆＃13;
＆＃13; 
$(document).ready( function() {
   $("#iambutton").click(function () {
    $("#a1")[0].beginElement();
    $("#a2")[0].beginElement();
    $("#a3")[0].beginElementAt(3);
    $("#a4")[0].beginElementAt(3);
   });
});
＆＃13; 
.mysvg {
  text-align: center;
}
.mysvg svg {
  margin: auto;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

$(document).ready( function() {
   $("#iambutton").clickenter code here(function () {
     console.log("hi");
    $(".mysvg").addClass( 'me' );
    document.getElementByID('mysvg').fill('red')
   });
});

答案 2 :(得分：0)

稍微更改SVG可以使其正常工作。

不要使用rect来制作电池电量，而应将它们作为＆＃34;孔＆＃34;在你的电池中，你可以在它下面设置一个rect的动画，它看起来就像填充了这个级别。

这样的事情：

＆＃13;
＆＃13; 
$(document).ready( function() {
   $("#iambutton").click(function () {
     console.log("hi");
    $(".mysvg").addClass( 'me' );
   });
});
＆＃13; 
.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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

对于非常简单的SVG感到很抱歉，但是重新绘制整个电池会花费更多的时间，你可以看到更多关于这种制作方式的信息＆＃34; hole＆＃34;在How to cut a hole in an SVG rectangle

相关问题
最新问题