如何使svg路径填充为进度动画？ [英] How make svg path fill as progressing animation?
本文介绍了如何使svg路径填充为进度动画？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有没有任何解决方案显示电池框架 red：fill 作为进度填充，而不覆盖 rect ？
.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 =110pxheight =88pxviewBox =0 0 110 88version =1.1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http： //www.w3.org/1999/xlinkid =mysvg> < g id =Page-1stroke =nonestroke-width =1fill =nonefill-rule =evenodd> < g id =Groupfill =＃EAEAEA> < rect id =Brick-4x =77.5y =10width =13.5height =68rx =3>< / rect> < rect id =Brick-3x =56y =10width =13.5height =68rx =3>< / rect> < rect id =Brick-2x =34.5y =10width =13.5height =68rx =3>< / rect> < rect id =Brick-1x =13y =10width =13.5height =68rx =3>< / rect> < path id =Rectangle-7d =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 Zid =loading-frame>< / path> < / g> < / g> < / svg>< / section>
解决方案
如果你绘制一个单一的路径的形状，这将是很容易，因为你可以动画一个单一的渐变填充它。或者，您可以扩展下面显示的每个元素一个渐变，具有不同的开始时间和持续时间。我只做了两个对象，你可以扩展的概念到其他如果你想要的。如果您需要IE支持，请使用 fakeSmile 。
$（document）.ready（function（）{$（＃iambutton）。click（function（）{$（＃a1）[0] .beginElement（）; $（ a2）[0] .beginElement（）; $（＃a3）[0] .beginElementAt（3）; $（＃a4）[0] .beginElementAt（3）;}）;}） / code>
.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>请求我查看进度< / button>< section class =mysvg> < svg width =110pxheight =88pxviewBox =0 0 110 88version =1.1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http： //www.w3.org/1999/xlinkid =mysvg> < defs> < linearGradient id =g1> < stop offset =0％stop-color =red> < animate id =a1attributeName =offsetfrom =0％to =100％dur =5sfill =freezebegin =indefinite/& < / stop> < stop offset =0％stop-color =＃EAEAEA> < animate id =a2attributeName =offsetfrom =0％to =100％dur =5sfill =freezebegin =indefinite/& < / stop> < / linearGradient> < linearGradient id =g2> < stop offset =0％stop-color =red> < animate id =a3attributeName =offsetfrom =0％to =100％dur =1sfill =freezebegin =indefinite/> < / stop> < stop offset =0％stop-color =＃EAEAEA> < animate id =a4attributeName =offsetfrom =0％to =100％dur =1sfill =freezebegin =indefinite/> < / stop> < / linearGradient> < / defs> < g id =Page-1stroke =nonestroke-width =1fill =nonefill-rule =evenodd> < g id =Groupfill =＃EAEAEA> < rect id =Brick-4fill =url（＃g2）x =77.5y =10width =13.5height =68rx =3>< / rect> ; < rect id =Brick-3x =56y =10width =13.5height =68rx =3>< / rect> < rect id =Brick-2x =34.5y =10width =13.5height =68rx =3>< / rect> < rect id =Brick-1x =13y =10width =13.5height =68rx =3>< / rect> < path id =Rectangle-7fill =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>
Is there any solution to show the battery frame red:fill as progress filling without covering the 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>
解决方案
It would be a lot easier if you drew the shape with a single path as you could then animate a single gradient to fill it. Alternatively you can extend what I've shown below to have one gradient per element with different start times and durations. I've only done two objects, you could extend the concept to the others if you want. If you want IE support, use 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>
这篇关于如何使svg路径填充为进度动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
