SVG, как сделать отзывчивый путь?

Question

Я использую scrollmagic, чтобы создать страницу прокрутки в 5000 пикселей, которая показывает мне svg во время прокрутки. Что-то вроде примера scrollmagic:

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> 

Я могу "нарисовать" эту линию от начала до конца свитка и успешно перевернуть. Мой вопрос, как я могу сделать этот SVG отзывчивым? Я пытался:

   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30%" height="5000px">

но я не работаю... Я не могу встроить svg непосредственно в src изображения, потому что если я использую изображение вместо координат пути, анимация рисования перестает работать. Итак, вопрос в том, как я могу сделать отзывчивым путь SVG?