我有一个 SVG 有很多很多这样的路径:
<svg version="1.1"
id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="drawing.svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="411.174px"
viewBox="-468.068 410.987 400 411.174" enable-background="new -468.068 410.987 400 411.174" xml:space="preserve">
<g id="layer1" inkscape:label="Capa 1" inkscape:groupmode="layer">
<g id="g3341" transform="translate(-5498.7634,510.10841)" inkscape:label="completebody:x0.00:x0.00:x0.00:x0.00:x0.00:x0.00">
<g id="g63451" transform="translate(-5600.6166,-1161.19179528)" inkscape:label="completebody:z180.00:y180.00:x0.00:z0.00:y0.00:x0.00">
<path class="path" id="path63453" inkscape:label="Face:4354" fill="#ffffff" stroke="#B2B2B2" stroke-width="0.25" stroke-linejoin="round" d="
M10775.398,1084.903l-14.83,8.177l7.673,1.257L10775.398,1084.903z"/>
<path class="path" id="path63455" inkscape:label="Face:3499" fill="#FFFFFF" stroke="#B2B2B2" stroke-width="0.25" stroke-linejoin="round" d="
M10885.204,1082.795l-5.618-2.201l6.066,7.177L10885.204,1082.795z"/>
<path class="path" id="path63457" inkscape:label="Face:3527" fill="#FFFFFF" stroke="#B2B2B2" stroke-width="0.25" stroke-linejoin="round" d="
M10885.204,1082.795l0.448,4.976l7.603,4.008L10885.204,1082.795z"/>
....
我想知道是否有一种方法可以让每个路径的不透明度从 0 到 1 一个接一个地淡出，不确定具体怎么做，有什么想法吗？
谢谢!
最佳答案
只是通过遍历每个 <path> 来完成这个使用 jQuery
var gapBetweenEach = 10;
var speedOfFade = 150;
$('.yourPathClass')).each(function(i, path){
$(path).delay(gapBetweenEach * i).fadeIn(speedOfFade, function(){
//Done animating this path
});
})
你必须添加...
style="display:none"
…给你们每个人<paths> , 对于 fadeIn上类
关于jquery - 依次淡出SVG的每条路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36790249/