我使用scrollmagic创建了一个5000px的滚动页面，在滚动过程中向我显示了一个svg。像滚动的例子：
http://scrollmagic.io/examples/advanced/svg_drawing.html
但在垂直方向。 我创建了一个示例svg一个简单的行：
<div id="svgPathContainer">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="5000px">
<path id="word" style="stroke-linecap: round; stroke-linejoin: round;"
fill="none" stroke="#000000" stroke-width="5"
d="M100.5,114.278c47.888,7.285,137.984,143.083,159.855,190.144
c30.89,66.468,10.254,111.869-37.772,152.906c-31.931,27.285-74.983,57.824-77.6,102.502
c-5.162,88.125,112.785,84.949,162.564,139.414c53.236,58.247,60.765,130.01,63.938,207.828
c4.147,101.679-29.448,146.444-104.211,209.857c-64.798,54.961-92.906,92.587-105.645,179.853
c-13.169,90.21,18.128,126.772,68.961,196.205c67.288,91.907,142.5,150.947,142.131,270.976
c-0.105,34.208,11.839,102.08-1.166,133.365c-10.983,26.423-67.391,53.781-93.12,73.762
c-72.74,56.487-150.915,119.124-177.245,214.908c-35.789,130.196,52.601,235.276,115.293,340.718
c40.142,67.514,80.142,136.714,121.243,203.728c24.011,39.147,25.978,64.328,23.883,111.723
c-3.379,76.453-25.588,148.162-69.406,210.981c-47.29,67.796-97.792,91.573-129.774,171.146
c-35.857,89.216-75.371,181.193-67.467,278.983c7.417,91.774,54.697,134.536,123.617,187.276
c52.593,40.247,70.239,78.729,98.745,139.482c17.03,36.297,50.864,102.872,32.315,143.921
c-18.371,40.654-99.974,70.074-133.71,95.443c-54.011,40.613-91.761,76.666-104.774,143.821
c-21.981,113.433,2.806,124.824,111,172.903c104.017,46.223,181.164,52.461,144.97,178.154
c-20.69,71.855-110.003,82.523-172.074,111.192c-26.481-39.319-116.671-107.498-68.566-157.16
c13.472-13.907,74.68-32.127,95.967-26.632c44.007,11.361,38.321,41.719,49.537,77.444c-30.281,6.589-62.791,14.078-92.874,22.222
c-0.973-11.136-3.413-27.139-0.84-38.178"/>
</svg>
</div>
我可以＆＃34;画＆＃34;此行从开始到结束滚动并成功反转。我的问题是如何让这个svg响应？我试过了：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30%" height="5000px">
但我无法工作......我无法将svg直接嵌入到图像src中，因为如果我使用图像而不是路径坐标，则绘图动画将停止工作。所以问题是，我如何能够响应svg路径？