我不知道为什么我的 svg 不绘图。我的控制台上没有“真正的”错误（“警告：补间被另一个覆盖”在这里不相关）
你可以在这里看到完整的演示：http: //mc-communicate.com/test/svg.html
以下是相关代码：
SVG HTML：
<svg version="1.1" width="1095" height="299" xmlns="http://www.w3.org/2000/svg">
<path id="c" d="m102,91.8c3,-0.5 5.6,-2.5 8.7,-2.5c3.10001,0.6 3.5,4.2 4.3,6.8c-2.4,-0.7 -4.7,-1.6 -7,-2.4c-10.4,8.5 -21.4,17.3 -27.9,29.4c-4.7,8.00001 -4.1,18.9 1.7,26.00001c4.6,5.7 12.1,8 19.2,8.09999c6.8,0 13.6,-0.89999 20.2,-2.09999c8.10001,-1.5 15.8,-4.8 23.90001,-6.10001c-12.40001,9.10001 -27.7,14.10001 -43.10001,15.10001c-8.5,0.5 -17.6,-0.3 -24.8,-5.40001c-8.5,-5.59999 -12.5,-16.7 -10.89999,-26.7c1.8,-10.9 6.8,-21.3 14.39999,-29.3c2.4,-2.8 5.7,-4.5 8.9,-6.2c2.8,-1.3 4.2,-4.4 6.7,-6.1c2,0.3 3.8,1.1 5.7,1.4z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="o" d="m179.10001,114c17.2,-2 35.29999,-1.7 51.29999,5.6c8.8,4 15.5,12.7 16.20001,22.50001c0.2,3.2 0.79999,7.2 -1.90001,9.59999c-9.2,9.90001 -22.59999,14.60001 -35.5,17.40001c-15.39999,2.79999 -32.5,1.39999 -45.59999,-7.70001c-2.90001,-2.39999 -7,-5 -6.70001,-9.29999c0,-8.3 2.3,-17 8,-23.20001c4.70001,-5.39999 11,-8.89999 17.3,-12.2c-1,-0.89999 -2,-1.8 -3.09999,-2.7m16.29999,7.7c-5.5,0.60001 -10.29999,3.5 -15.39999,5.2c-3.8,1.2 -7.39999,2.99999 -9.89999,6.2c-3.20001,3.2 -3.8,7.59999 -4.10001,11.89999c0,2.89999 -2.60001,6.39999 0.10001,8.8c4.79999,5.09999 11.79999,8.5 18.89999,8.5c8.7,0.2 17.39999,0.09999 26.10001,-1.10001c4.79999,-0.7 9.7,-0.2 14.5,-0.8c7.29999,-1.79999 13.09999,-8.79999 13.29999,-16.39999c0.5,-6.7 -3.09999,-13.5 -8.89999,-17c-4.8,-3 -10.39999,-3.8 -15.8,-5.2c-6.2,-1.60001 -12.59999,-0.8 -18.8,-0.10001z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="m" d="m269.20001,156.10001c10.89999,-13.40001 13.39999,-32.2 26.79999,-43.7c1.79999,1.2 4.70001,1.9 4.60001,4.6c0.89999,8.4 1.60001,16.89999 3.79999,25.10001c6.60001,-5 8.39999,-13.40001 12.5,-20.2c2.30002,-3.9 6.39999,-6.1 10.70001,-7c0.79999,9.7 2.60001,19.9 9,27.49999c4,4.8 11.10001,7.90001 17.10001,5.3c3.79999,-1.59999 7.5,-3.59999 11.69998,-4c-1,6.2 -7.69998,8 -12.60001,10.10001c-5.89999,2.7 -12.59998,0.5 -17.69998,-2.90001c-6.70001,-4.79999 -10.70001,-12.39999 -13.80002,-19.89999c-5.39999,5.3 -6.5,13.3 -11.09998,19.10001c-2.20001,2.89999 -5.80002,4 -9.20001,4.5c-4.70001,-8.90001 -5.39999,-19.20001 -7.39999,-28.90001c-9.30002,12.5 -13.30002,27.8 -18.89999,42.10001c-1.5,2.89999 -5,3.8 -7.60001,5.39999c-4.89999,-13.3 -9.89999,-26.89999 -11,-41.09999c-0.10001,-5.10001 -0.20001,-11.40001 4.29999,-14.7c1.89999,-0.6 3.70001,1.1 4.5,2.7c1.39999,3.1 1.20001,6.6 1.30002,9.9c0,8.8 0.29999,17.7 3,26.10001z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="i" d="m380.10001,113c1.10001,-1.8 3.5,-0.9 4.79999,0.2c0.20001,5.3 -0.69998,10.5 -0.39999,15.8c0.5,13.39999 7,25.5 11.60001,37.8c-1.60001,0.5 -3.30002,1 -4.89999,1.5c-6.90002,-10.8 -11.80002,-22.90001 -14.10001,-35.5c-0.80002,-6.60001 -1.89999,-14.4 3,-19.8z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="idot" d="m380.5,78.8c2.20001,-0.3 4.70001,-1.60001 6.60001,0.1c3.79999,3 6.19998,7.3 8.89999,11.3c-4.29999,1.8 -8.10001,-1.6 -11.5,-3.7c-2.79999,-1.6 -3.29999,-4.9 -4,-7.7z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="n" d="m444.39999,125.3c2,0 4,0.1 6,0.1c3.39999,10.99999 6,22.2 10.5,32.8c3.70001,9.3 10.80002,17.10001 19.10001,22.8c4.70001,3.3 10.70001,3.5 16.10001,2.2c5.5,-1.09999 10.29999,-4.09999 15.39999,-6.39999c-1.10001,3.39999 -3.79999,6 -6.89999,7.7c-4,2.10001 -7.80002,5.5 -12.60001,4.8c-10.29999,-0.8 -21.29999,-3.90001 -28.29999,-12c-10.70001,-11.10001 -14.10001,-26.60001 -18.70001,-40.8c-10.5,9 -12.29999,23.89999 -22.20001,33.3c-2.19998,2.2 -4.79999,3.7 -7.5,5.09999c-1.69998,-2 -3.59998,-3.89999 -4.89999,-6.2c-0.10001,-5.8 0.70001,-11.59999 0.10001,-17.5c-0.60001,-8.3 -0.89999,-17.59999 4.79999,-24.39999c2.10001,0.89999 4.70001,1.59999 5.90002,3.8c0,4.5 -1.60001,9 -1.70001,13.59999c0,4.60001 -0.29999,9.2 -0.60001,13.90001c9.60001,-10.10001 16.80002,-22 25.5,-32.8z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="g" d="m524.5,125.5c8.20001,-5.1 20.90002,-3.9 26.09998,4.89999c3.20001,4.8 1.70001,10.8 0.60004,16c2.59998,-1.29999 5,-3.2 7.79999,-4.09999c1.59998,-0.10001 4,0.39999 4.20001,2.39999c1.70001,9.90001 -0.29999,20.3 3.29999,29.90001c1.40002,3.29999 -1,6.89999 0.70001,10.09999c7.09998,19.10001 17.09998,36.90001 28.09998,54c3.79999,5.3 2.40002,12.3 2.5,18.40001c0.29999,6.29999 -6,9.89999 -11.09998,11.60001c-15.79999,4.79999 -33,2.59998 -48.29999,-3.10001c-6.40002,-2.60001 -13.40002,-5.89999 -16.60004,-12.3c-3.79999,-8.2 -3,-17.8 -1.59998,-26.5c1.5,9.59999 2.70001,20.09999 9.09998,27.89999c2.10004,2.8 5.70001,3.3 8.90002,4.2c7.89996,1.89999 15.79999,3.80002 23.79999,5.20001c4.40002,0.89999 8.70001,-1.30002 12.90002,-2.20001c4.79999,-1.29999 10.39996,-2.19998 13.69995,-6.39999c1.10004,-1.2 0.5,-2.89999 0.30005,-4.3c-5.5,-23.7 -23.60004,-41.89999 -29.60004,-65.5c-1.79999,-9.8 -1.09998,-20.2 -5.59998,-29.5c-2.5,0.60001 -5.10004,1 -7.5,2c-2.29999,0.90001 -3.5,4 -6.20001,4c-9.40002,0.40001 -17.59998,5.2 -26.59998,7.2c-5.40002,1.20001 -11.50003,2.60001 -16.70001,-0.2c-4.20001,-2.2 -6.20001,-7.5 -4.70001,-12c2.39999,-8 8.60001,-14.2 14.79999,-19.5c5.5,-4.59999 11.70001,-8.3 17.70001,-12.2m9.29999,5.3c-7.29999,2.2 -13.59998,6.7 -19.39996,11.5c-5.80002,4.89999 -11.30002,10.5 -14.40002,17.59999c6.20001,2.60001 13.20001,3.40001 19.79999,1.8c10,-2.39999 19.70001,-6.39999 28.90002,-11.09999c1.20001,-3.70001 0.59998,-7.8 0.79999,-11.70001c0.09998,-3.29999 -2.59998,-5.59999 -5.09998,-7.39999c-3.10004,-2.10001 -7.20001,-1.7 -10.60004,-0.7z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="s" d="m702,92c6.5,-2.9 14.20001,-3.4 20.70001,-0.2c-1.10004,6.3 -5.70001,11.1 -11.5,13.5c-1.10004,-1.2 -2.10004,-2.5 -3.40002,-3.60001c-10.59998,0.5 -17.89996,9.3 -25.79999,15.3c10.79999,0.9 21.70001,1 32.5,2.4c11.20001,1.1 22.79999,3.2 32.40002,9.7c3.09998,1.7 2.59998,5.79999 2.59998,8.89999c-0.40002,9.89999 -7.59998,17.89999 -15.70001,22.8c-6.20001,4 -13.70001,5 -19.79999,9.2c-3.40002,2.10001 -7.20001,5.2 -11.5,3.5c-7,-2.2 -9.20001,-10.7 -7.40002,-17.2c3.30005,2.2 2,8.7 6.90002,8.59999c7.20001,0.8 13.20001,-3.7 19.29999,-6.7c4.40002,-2.5 9.29999,-4.3 12.90002,-8c2.70001,-4 4.09998,-8.8 7.59998,-12.3c-6.09998,-9.2 -17.89996,-11.3 -28.09998,-12.39999c-11.29999,-1.4 -22.5,0.5 -33.70001,1.7c-4.29999,0 -9.59998,0.7 -13.09998,-2.39999c0.19995,-3.5 1.29999,-7.3 4,-9.9c1.5,-0.4 3.19995,-0.4 4.89996,-0.5c7.29999,-8.9 15.29999,-17.9 26.20001,-22.4z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="otwo" d="m781.09998,114c17.20001,-2 35.30005,-1.7 51.30005,5.6c8.79999,4 15.5,12.7 16.19995,22.50001c0.20001,3.2 0.80005,7.2 -1.79999,9.59999c-9.09998,9.7 -22.20001,14.40001 -34.79999,17.2c-15.59998,3.10001 -33.09998,1.8 -46.40002,-7.5c-2.89996,-2.39999 -7,-5 -6.69995,-9.29999c0,-8.3 2.29999,-17 8,-23.20001c4.69995,-5.39999 11,-8.99999 17.29999,-12.2c-1,-0.89999 -2,-1.8 -3.10004,-2.7m-8.29999,20.8c-2.59998,1.89999 -1.89996,5.2 -2.39996,8c-0.40002,3.2 -2.5,5.7 -4.20001,8.3c4.09998,6.79999 12.09998,10 19.70001,10.79999c11.39996,1.10001 23,0.20001 34.19995,-1.7c4.60004,-0.7 8.20001,-3.8 12.10004,-6c3.5,-2.09999 7,-5.09999 8,-9.3c1.09998,-4.89999 -0.90002,-10.2 -4,-14c-4,-4.99999 -10.20001,-7.2 -16.29999,-7.99999c-0.5,4.5 0.09998,9.49999 -2.5,13.49999c-0.90002,0.90001 -3.40002,2.3 -3.70001,0.3c0,-1.7 0.5,-3.39999 0.5,-5.09999c-3.29999,-7.40001 -12.20001,-11.50001 -20,-9.3c-8,2.3 -15.29999,6.8 -21.40002,12.5z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="othree" d="m899.40002,113.6c5.59998,-1.3 11.39996,0.1 17,1c9.09998,1.9 18.79999,4.7 25.29999,11.8c5.5,5.9 8,14.4 6.79999,22.4c-0.29999,1.59999 -1.70001,2.8 -2.70001,4c-7.09998,7 -16.5,11.2 -25.89996,14.09999c-13.40002,4.20001 -28.10004,4.90001 -41.5,0.70001c-7.30005,-2.40001 -14.90002,-6.10001 -19.20001,-12.8c-0.79999,-5.5 0.29999,-11.2 2.09998,-16.5c3.20001,-9 11.10004,-15.3 19.29999,-19.7c5.80005,-3.3 12.60004,-3.1 18.80005,-5m-6,8.9c-10.10004,2.7 -17.5,10.39999 -26.30005,15.7c-3.29999,3.3 -2.89996,8.90001 -1.19995,12.90001c3.39996,5.59999 9.79999,8.59999 15.89996,10.09999c5.90002,1.40001 11,5.5 17.20001,5.3c10.40002,-1.10001 20.59998,-4.5 29.40002,-10.10001c4,-2.39999 8.69995,-4.7 10.89996,-9.09999c2.5,-4.90001 0.70001,-10.90001 -2.29999,-15.3c-3.40002,-5 -9.29999,-7.7 -15.09998,-8.9c-5.20001,-1.4 -10.60004,-0.5 -15.90002,-0.8c-4.20001,-0.2 -8.5,-1 -12.59998,0.2z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="ntwo" d="m992.40002,125.3c2,0 4,0.1 6,0.1c2.09998,6.99999 4.09998,13.99999 6.19995,20.99999c3,9.40001 6.5,19.10001 13.70001,26.3c5.29999,5.3 11.60004,11.5 19.70001,11.2c7.80005,0.10001 14.69995,-3.79999 21.5,-7.09999c-1.09998,3.39999 -3.80005,6 -6.90002,7.7c-4,2.10001 -7.79993,5.5 -12.59998,4.8c-10.30005,-0.90001 -21.29999,-3.90001 -28.29999,-12c-10.70001,-11.10001 -14.10004,-26.60001 -18.70001,-40.8c-10.70001,9.10001 -12.40002,24.5 -22.70001,33.8c-2.09998,1.89999 -4.59998,3.3 -7,4.59999c-1.70001,-2 -3.59998,-3.89999 -4.89996,-6.2c-0.10004,-5.5 0.59998,-11.09999 0.19995,-16.59999c-0.59998,-8.60001 -1.19995,-18.20001 4.70001,-25.3c2.10004,0.89999 4.70001,1.59999 5.90002,3.8c0,4.5 -1.60004,9 -1.60004,13.59999c-0.09998,4.60001 -0.39996,9.2 -0.69995,13.90001c9.59998,-10.10001 16.79999,-22 25.5,-32.8z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
</svg>
JS：
<script>
function pathPrepare ($el) {
var lineLength = $el[0].getTotalLength();
$el.css("stroke-dasharray", lineLength);
$el.css("stroke-dashoffset", lineLength);
}
var $c = $("path#c");
var $o = $("path#o");
var $m = $("path#m");
var $i = $("path#i");
var $idot = $("path#idot");
var $n = $("path#n");
var $g = $("path#g");
var $s = $("path#s");
var $otwo = $("path#otwo");
var $othree = $("path#othree");
var $ntwo = $("path#ntwo");
// prepare SVG
pathPrepare($c);
pathPrepare($o);
pathPrepare($m);
pathPrepare($i);
pathPrepare($idot);
pathPrepare($n);
pathPrepare($g);
pathPrepare($s);
pathPrepare($otwo);
pathPrepare($othree);
pathPrepare($ntwo);
// init controller
var controller = new ScrollMagic.Controller();
// build tween
var tween = new TimelineMax()
.add(TweenMax.to($c, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($o, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($m, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($i, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($idot, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($n, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($g, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($s, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($otwo, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($othree, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($ntwo, 0.1, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw dot for 0.1
.add(TweenMax.to("path", 20, {
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>