Question

我有一个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的不透明度，一个接一个，不确定它是如何完成的，任何想法？

谢谢！

Answer 1

通过使用jQuery循环遍历每个<path>来完成此操作

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工作

一个接一个地淡入SVG的每个路径

1 个答案: