我正在玩Scrollmagic并希望在这里使用效果：
http://scrollmagic.io/examples/advanced/svg_drawing.html
我创建了一个squiggle svg来测试它,需要将路径的长度插入到stroke-dasharray：2000px; stroke-dashoffset：2000px;
如何找到路径的长度？
function pathPrepare ($el) {
var lineLength = $el[0].getTotalLength();
$el.css("stroke-dasharray",lineLength);
$el.css("stroke-dashoffset",lineLength);
}
var $word = $("path#word");
var $dot = $("path#dot");
// prepare SVG
pathPrepare($word);
// init controller
var controller = new ScrollMagic.Controller();
// build tween
var tween = new TimelineMax()
.add(TweenMax.to($word,0.9,{strokeDashoffset: 0,ease:Linear.easeNone})) // draw word for 0.9
.add(TweenMax.to("path",1,{stroke: "#33629c",ease:Linear.easeNone}),0); // change color during the whole thing
// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#trigger1",duration: 200,tweenChanges: true})
.setTween(tween)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js"></script> <div style="height: 400px;"></div> <div class="spacer s2"></div> <div id="trigger1" class="spacer s0"></div> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 841.9 595.3" xml:space="preserve" width="1000px"> <style type="text/css"> .st0{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;} </style> <path id="word" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2000px; stroke-dashoffset: 2000px;" fill="none" class="st0" d="M29.7,6.4c-42,87.9,34.6,16.4,96.4,12.1s346,145.7,192.8,110.4S40.8,9.8,66.8,128s179.2,218.1,281.7,122.4 s10.2-115.2,215-94c465.8,48.3,233.5,90.1,90.2,85.4c-247-8.1,299.2,110.9-259.5,138C46.5,396.6-33.3,439.2,145.8,491 s171.8-83.6,431.3-18.1s96.4,107.8-79.1,122.4"/> </svg> <div style="height: 400px;"></div> <div class="spacer s2"></div>
解决方法
你可以使用
getTotalLength()：
The SVGGeometryElement.getTotalLength() method returns the user agent’s computed value for the total length of the path in user units.
以下是SVG的演示：
var myPath = document.getElementById("word");
var length = myPath.getTotalLength();
console.log(length);
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 841.9 595.3" xml:space="preserve" width="1000px"> <style type="text/css"> .st0{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;} </style> <path id="word" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2000px; stroke-dashoffset: 2000px;" fill="none" class="st0" d="M29.7,122.4"/> </svg>
