Snap svg计算路径

时间：2017-04-10 09:18:27

标签： animation svg

这是sample。我试图制作路径dasharray \ dashoffset动画技巧。但Snap Svg计算错误的路径长度。 Svg由Illustrator上的复合路径制作。我做错了什么，或者这是一个错误我应该报错吗？有没有办法计算路径长度？

/*First svg*/
var path = Snap('#svg path');
var pathLength = Snap.path.getTotalLength(path); //calc length

path.attr({
  "stroke-dashoffset": 0,
  "stroke-dasharray": pathLength
});

$("#total").text(pathLength);

/*path.animate({"stroke-dashoffset": pathLength}, 3500, mina.ease);*/
Snap.animate(0, pathLength, function(value) {
  path.attr({
    'stroke-dashoffset': value
  });
  $("#len").text(value);
}, 5000, mina.easeinout);

/*Second svg*/
var path2 = Snap('#svg2 path');
var selectedLength = 112; //select length by playing with styles in browser
path2.attr({
  "stroke-dashoffset": 0,
  "stroke-dasharray": selectedLength
});

$("#total2").text(selectedLength);

Snap.animate(0, selectedLength, function(value) {
  path2.attr({
    'stroke-dashoffset': value
  });
  $("#len2").text(value);
}, 5000, mina.easeinout);
.wrap {
  width: 100px;
  float: left;
  margin: 0 20px 0 0;
}

#svg,
#svg2 {
  fill-opacity: 0;
  stroke: #000;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.body:after {
  content: '';
  clear: both;
  display: block;
}

.panel {
  font-family: Arial;
  line-height: 1.3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
  <div class="wrap">
    <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
            <path class="st0" d="M59.1,32V13.6l0,0c0-0.1,0-0.2-0.1-0.3v-0.1c-0.1-0.1-0.1-0.2-0.2-0.3L47.2,1.3c-0.1-0.1-0.2-0.1-0.3-0.2h-0.1
        c-0.1,0-0.2-0.1-0.3-0.1l0,0H1.8c-0.6,0-1,0.4-1,1v8.7 M45.5,1.1v12.6c0,0.6,0.4,1,1,1h12.4 M58.2,42.2h-2.6
        c-0.1-0.1-0.1-0.3-0.2-0.4l1.9-1.7c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7l-3.9-3.9c-0.4-0.4-0.9-0.4-1.3,0l-1.8,1.8
        c-0.2-0.1-0.3-0.1-0.4-0.2v-2.7c0-0.6-0.4-0.9-0.9-0.9h-5.6c-0.6,0-0.9,0.4-0.9,0.9v2.5c-0.1,0.1-0.3,0.1-0.4,0.2l-1.8-1.8
        c-0.4-0.4-0.9-0.4-1.3,0l-3.9,3.9c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7l1.8,1.8c-0.1,0.2-0.1,0.3-0.2,0.4H34
        c-0.6,0-0.9,0.4-0.9,0.9v5.6c0,0.6,0.4,0.9,0.9,0.9h2.6c0.1,0.1,0.1,0.3,0.2,0.4L35,51.7c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7
        l3.9,3.9c0.4,0.4,0.9,0.4,1.3,0l1.8-1.8c0.2,0.1,0.3,0.1,0.4,0.2v2.7c0,0.6,0.4,0.9,0.9,0.9h5.6c0.6,0,0.9-0.4,0.9-0.9v-2.6
        c0.1-0.1,0.3-0.1,0.4-0.2l1.8,1.8c0.4,0.4,0.9,0.4,1.3,0l3.9-3.9c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7L55.4,50
        c0.1-0.1,0.1-0.3,0.2-0.4h2.6c0.6,0,0.9-0.4,0.9-0.9v-5.6C59.1,42.6,58.8,42.2,58.2,42.2z M46,42c-2.2,0-4,1.8-4,4s1.8,4,4,4
        s4-1.8,4-4S48.2,42,46,42z M16.2,59V26.6c0-0.2,0-0.4,0.1-0.5l3.2-5.8c0.1-0.4,0.5-0.5,0.8-0.5s0.7,0.1,0.8,0.5l3.2,5.8
        c0.1,0.2,0.1,0.4,0.1,0.5V59 M11,59V15c0-0.6-0.3-1-0.8-1H1.7c-0.5,0-0.8,0.4-0.8,1v44 M5,5h12 M20.4,5h4 M5,9h20 M55,19H35 M45,23
        H29 M55,28H29 M35,32h-6 M55,23h-6 M0.9,23H5 M0.9,32.7H5 M0.9,42H5 M0.9,51.8H5 M16.2,26.6h4.1h4.1 M20.3,59V26.6" />
        </svg>
  </div>
  <div class="panel">
    <div>Length calc by Snap.path.getTotalLength</div>
    <div id="total"></div>
    <div>Stroke dashoffset during animation</div>
    <div id="len"></div>
  </div>
</div>
<div class="body">
  <div class="wrap">
    <svg id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
            <path class="st0" d="M59.1,32V13.6l0,0c0-0.1,0-0.2-0.1-0.3v-0.1c-0.1-0.1-0.1-0.2-0.2-0.3L47.2,1.3c-0.1-0.1-0.2-0.1-0.3-0.2h-0.1
        c-0.1,0-0.2-0.1-0.3-0.1l0,0H1.8c-0.6,0-1,0.4-1,1v8.7 M45.5,1.1v12.6c0,0.6,0.4,1,1,1h12.4 M58.2,42.2h-2.6
        c-0.1-0.1-0.1-0.3-0.2-0.4l1.9-1.7c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7l-3.9-3.9c-0.4-0.4-0.9-0.4-1.3,0l-1.8,1.8
        c-0.2-0.1-0.3-0.1-0.4-0.2v-2.7c0-0.6-0.4-0.9-0.9-0.9h-5.6c-0.6,0-0.9,0.4-0.9,0.9v2.5c-0.1,0.1-0.3,0.1-0.4,0.2l-1.8-1.8
        c-0.4-0.4-0.9-0.4-1.3,0l-3.9,3.9c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7l1.8,1.8c-0.1,0.2-0.1,0.3-0.2,0.4H34
        c-0.6,0-0.9,0.4-0.9,0.9v5.6c0,0.6,0.4,0.9,0.9,0.9h2.6c0.1,0.1,0.1,0.3,0.2,0.4L35,51.7c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7
        l3.9,3.9c0.4,0.4,0.9,0.4,1.3,0l1.8-1.8c0.2,0.1,0.3,0.1,0.4,0.2v2.7c0,0.6,0.4,0.9,0.9,0.9h5.6c0.6,0,0.9-0.4,0.9-0.9v-2.6
        c0.1-0.1,0.3-0.1,0.4-0.2l1.8,1.8c0.4,0.4,0.9,0.4,1.3,0l3.9-3.9c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7L55.4,50
        c0.1-0.1,0.1-0.3,0.2-0.4h2.6c0.6,0,0.9-0.4,0.9-0.9v-5.6C59.1,42.6,58.8,42.2,58.2,42.2z M46,42c-2.2,0-4,1.8-4,4s1.8,4,4,4
        s4-1.8,4-4S48.2,42,46,42z M16.2,59V26.6c0-0.2,0-0.4,0.1-0.5l3.2-5.8c0.1-0.4,0.5-0.5,0.8-0.5s0.7,0.1,0.8,0.5l3.2,5.8
        c0.1,0.2,0.1,0.4,0.1,0.5V59 M11,59V15c0-0.6-0.3-1-0.8-1H1.7c-0.5,0-0.8,0.4-0.8,1v44 M5,5h12 M20.4,5h4 M5,9h20 M55,19H35 M45,23
        H29 M55,28H29 M35,32h-6 M55,23h-6 M0.9,23H5 M0.9,32.7H5 M0.9,42H5 M0.9,51.8H5 M16.2,26.6h4.1h4.1 M20.3,59V26.6" />
        </svg>
  </div>
  <div class="panel">
    <div>Length selected by me testing in browser</div>
    <div id="total2"></div>
    <div>Stroke dashoffset during animation</div>
    <div id="len2"></div>
  </div>
</div>

1 个答案:

答案 0 :(得分：0)

Ty to Alexandr_T。他解释了为什么它发生了错误。我将svg form复合路径重写为小路径。每条路径的开始是d =＆＃34; M ...＆＃34; （搬去）。刚在记事本中编辑过它。这是救恩。

＆＃13;
＆＃13; 
/*First svg*/
var path = Snap('#svg path');
var pathLength = Snap.path.getTotalLength(path); //calc length

path.attr({
    "stroke-dashoffset": 0,
    "stroke-dasharray": pathLength
});

$("#total").text(pathLength);

/*path.animate({"stroke-dashoffset": pathLength}, 3500, mina.ease);*/
Snap.animate(0, pathLength, function(value) {
    path.attr({
        'stroke-dashoffset': value
    });
    $("#len").text(value);
}, 5000, mina.easeinout);

/*Second svg*/
var svg2 = Snap('#svg2');
var paths = svg2.selectAll("path");
var maxLength = 0;
var tempLength = 0;

for (key in paths.items) {
    tempLength = Snap.path.getTotalLength(paths.items[key]);
    if (maxLength < tempLength) {
        maxLength = tempLength;
    }
}

svg2.attr({
    "stroke-dashoffset": 0,
    "stroke-dasharray": maxLength
});

$("#total2").text(maxLength);

Snap.animate(0, maxLength, function(value) {
    svg2.attr({
        'stroke-dashoffset': value
    });
    $("#len2").text(value);
}, 5000, mina.easeinout);
＆＃13; 
.wrap {
    width: 100px;
    float: left;
    margin: 0 20px 0 0;
}

#svg,
#svg2 {
    fill-opacity: 0;
    stroke: #000;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.body:after {
    content: '';
    clear: both;
    display: block;
}

.panel {
    font-family: Arial;
    line-height: 1.3em;
}
＆＃13; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
    <div class="wrap">
        <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
            <path class="st0" d="M59.1,32V13.6l0,0c0-0.1,0-0.2-0.1-0.3v-0.1c-0.1-0.1-0.1-0.2-0.2-0.3L47.2,1.3c-0.1-0.1-0.2-0.1-0.3-0.2h-0.1
        c-0.1,0-0.2-0.1-0.3-0.1l0,0H1.8c-0.6,0-1,0.4-1,1v8.7 M45.5,1.1v12.6c0,0.6,0.4,1,1,1h12.4 M58.2,42.2h-2.6
        c-0.1-0.1-0.1-0.3-0.2-0.4l1.9-1.7c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7l-3.9-3.9c-0.4-0.4-0.9-0.4-1.3,0l-1.8,1.8
        c-0.2-0.1-0.3-0.1-0.4-0.2v-2.7c0-0.6-0.4-0.9-0.9-0.9h-5.6c-0.6,0-0.9,0.4-0.9,0.9v2.5c-0.1,0.1-0.3,0.1-0.4,0.2l-1.8-1.8
        c-0.4-0.4-0.9-0.4-1.3,0l-3.9,3.9c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7l1.8,1.8c-0.1,0.2-0.1,0.3-0.2,0.4H34
        c-0.6,0-0.9,0.4-0.9,0.9v5.6c0,0.6,0.4,0.9,0.9,0.9h2.6c0.1,0.1,0.1,0.3,0.2,0.4L35,51.7c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7
        l3.9,3.9c0.4,0.4,0.9,0.4,1.3,0l1.8-1.8c0.2,0.1,0.3,0.1,0.4,0.2v2.7c0,0.6,0.4,0.9,0.9,0.9h5.6c0.6,0,0.9-0.4,0.9-0.9v-2.6
        c0.1-0.1,0.3-0.1,0.4-0.2l1.8,1.8c0.4,0.4,0.9,0.4,1.3,0l3.9-3.9c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7L55.4,50
        c0.1-0.1,0.1-0.3,0.2-0.4h2.6c0.6,0,0.9-0.4,0.9-0.9v-5.6C59.1,42.6,58.8,42.2,58.2,42.2z M46,42c-2.2,0-4,1.8-4,4s1.8,4,4,4
        s4-1.8,4-4S48.2,42,46,42z M16.2,59V26.6c0-0.2,0-0.4,0.1-0.5l3.2-5.8c0.1-0.4,0.5-0.5,0.8-0.5s0.7,0.1,0.8,0.5l3.2,5.8
        c0.1,0.2,0.1,0.4,0.1,0.5V59 M11,59V15c0-0.6-0.3-1-0.8-1H1.7c-0.5,0-0.8,0.4-0.8,1v44 M5,5h12 M20.4,5h4 M5,9h20 M55,19H35 M45,23
        H29 M55,28H29 M35,32h-6 M55,23h-6 M0.9,23H5 M0.9,32.7H5 M0.9,42H5 M0.9,51.8H5 M16.2,26.6h4.1h4.1 M20.3,59V26.6" />
        </svg>
    </div>
    <div class="panel">
        <div>Length calc by getTotalLength() from combined path</div>
        <div id="total"></div>
        <div>Stroke dashoffset during animation</div>
        <div id="len"></div>
    </div>
</div>
<div class="body">
    <div class="wrap">
        <svg id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" >
            <path d="M59.1,32V13.6l0,0c0-0.1,0-0.2-0.1-0.3v-0.1c-0.1-0.1-0.1-0.2-0.2-0.3L47.2,1.3c-0.1-0.1-0.2-0.1-0.3-0.2h-0.1
            c-0.1,0-0.2-0.1-0.3-0.1l0,0H1.8c-0.6,0-1,0.4-1,1v8.7"/>
            <path d="M45.5,1.1v12.6c0,0.6,0.4,1,1,1h12.4"/>
            <path d="M58.2,42.2h-2.6
            c-0.1-0.1-0.1-0.3-0.2-0.4l1.9-1.7c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7l-3.9-3.9c-0.4-0.4-0.9-0.4-1.3,0l-1.8,1.8
            c-0.2-0.1-0.3-0.1-0.4-0.2v-2.7c0-0.6-0.4-0.9-0.9-0.9h-5.6c-0.6,0-0.9,0.4-0.9,0.9v2.5c-0.1,0.1-0.3,0.1-0.4,0.2l-1.8-1.8
            c-0.4-0.4-0.9-0.4-1.3,0l-3.9,3.9c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7l1.8,1.8c-0.1,0.2-0.1,0.3-0.2,0.4H34
            c-0.6,0-0.9,0.4-0.9,0.9v5.6c0,0.6,0.4,0.9,0.9,0.9h2.6c0.1,0.1,0.1,0.3,0.2,0.4L35,51.7c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7
            l3.9,3.9c0.4,0.4,0.9,0.4,1.3,0l1.8-1.8c0.2,0.1,0.3,0.1,0.4,0.2v2.7c0,0.6,0.4,0.9,0.9,0.9h5.6c0.6,0,0.9-0.4,0.9-0.9v-2.6
            c0.1-0.1,0.3-0.1,0.4-0.2l1.8,1.8c0.4,0.4,0.9,0.4,1.3,0l3.9-3.9c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7L55.4,50
            c0.1-0.1,0.1-0.3,0.2-0.4h2.6c0.6,0,0.9-0.4,0.9-0.9v-5.6C59.1,42.6,58.8,42.2,58.2,42.2z"/>
            <path d="M46,42c-2.2,0-4,1.8-4,4s1.8,4,4,4
            s4-1.8,4-4S48.2,42,46,42z"/>
            <path d="M16.2,59V26.6c0-0.2,0-0.4,0.1-0.5l3.2-5.8c0.1-0.4,0.5-0.5,0.8-0.5s0.7,0.1,0.8,0.5l3.2,5.8
            c0.1,0.2,0.1,0.4,0.1,0.5V59"/>
            <path d="M11,59V15c0-0.6-0.3-1-0.8-1H1.7c-0.5,0-0.8,0.4-0.8,1v44"/>
            <path d="M5,5h12"/>
            <path d="M20.4,5h4"/>
            <path d="M5,9h20"/>
            <path d="M55,19H35"/>
            <path d="M45,23
            H29"/>
            <path d="M55,28H29"/>
            <path d="M35,32h-6"/>
            <path d="M55,23h-6"/>
            <path d="M0.9,23H5"/>
            <path d="M0.9,32.7H5"/>
            <path d="M0.9,42H5"/>
            <path d="M0.9,51.8H5"/>
            <path d="M16.2,26.6h4.1h4.1"/>
            <path d="M20.3,59V26.6"/>
        </svg>
    </div>
    <div class="panel">
        <div>I rewrite combined path to small paths. Begining of each path is d="M..." (moveto)</div>
        <div>Max length of svg paths getted by getTotalLength();</div>
        <div id="total2"></div>
        <div>Stroke dashoffset during animation</div>
        <div id="len2"></div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题