Сделать дорожку SVG полной шириной и высотой экрана

Question

У меня есть встроенный путь SVG, который оживляет тире, чтобы выглядеть как змеиная игра. Теперь мой вопрос заключается в том, как получить этот путь, чтобы охватить всю ширину и высоту экрана и реагировать, если экран будет меньше или больше.

HTML

<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" width="100%" height="100%" viewBox="0 0 659 522" enable-background="new 0 0 659 522" xml:space="preserve"> 
    <path class="path" width="100%" height="100%" fill="none" stroke="#00ff00" stroke-width="5" stroke-miterlimit="10" d="M656.5,2.5v517H2.5V2.5H656.5z" 
    stroke-dasharray="2042 300" 
    stroke-dashoffset="2342" /> 
</svg> 

CSS

.path { 
    animation: dash 10s linear infinite; 
} 

@-webkit-keyframes dash { 
    to { 
     stroke-dashoffset: 0; 
    } 
} 

Вот скрипка с кодом я.

http://jsfiddle.net/c3ar6e5o/

Answer 1

Вы должны сказать SVG не поддерживать соотношение сторон с preserveAspectRatio="none" в SVG code..then это просто CSS.

JSfiddle Demo

html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
svg { 
 
    display: block; 
 
} 
 
.path { 
 
    animation: dash 10s linear infinite; 
 
} 
 
@-webkit-keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<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" width="100%" height="100%" viewBox="0 0 659 522" enable-background="new 0 0 659 522" xml:space="preserve" preserveAspectRatio="none"> 
 
    <path class="path" width="100%" height="100%" fill="none" stroke="#00ff00" stroke-width="5" stroke-miterlimit="10" d="M656.5,2.5v517H2.5V2.5H656.5z" stroke-dasharray="2042 300" stroke-dashoffset="2342" /> 
 
</svg>