Строки SVG нарисовать на свитке с jQuery

Question

Как я могу создать анимацию рисования с помощью CSS для элемента «строка» SVG. Я хочу нарисовать линию на свитке с плавным эффектом. У кого-то есть идеи? Я пытаюсь выполнить поиск, но я не могу найти этот эффект с помощью элемента линии. вот мой HTML и SVG:

<div class="box"> 
<svg width="100%" height="100%"> 
    <line x1="0" y1="0" x2="0" y2="100%" stroke="gray" stroke-width="2" /> 
    <line x1="0" y1="100%" x2="100%" y2="100%" stroke="gray" stroke-width="2" /> 
</svg> 
</div> 
<div class="box2"> 
<svg width="100%" height="100%"> 
    <line x1="100%" y1="100%" x2="100%" y2="0" stroke="gray" stroke-width="2" /> 
    <line x1="0" y1="100%" x2="100%" y2="100%" stroke="gray" stroke-width="2" /> 
</svg> 
</div> 
<div class="box"> 
<svg width="100%" height="100%"> 
    <line x1="0" y1="0" x2="0" y2="100%" stroke="gray" stroke-width="2" /> 
    <line x1="0" y1="100%" x2="100%" y2="100%" stroke="gray" stroke-width="2" /> 
</svg> 
</div> 
<div class="box2"> 
<svg width="100%" height="100%"> 
    <line x1="100%" y1="100%" x2="100%" y2="0" stroke="gray" stroke-width="2" /> 
    <line x1="0" y1="100%" x2="100%" y2="100%" stroke="gray" stroke-width="2" /> 
</svg> 
</div> 

и CSS:

.box{ 
    width: 100%; 
    height: 300px; 
    position: relative; 
} 
.box2{ 
    width: 100%; 
    height: 300px; 
    position: relative; 
} 

Demo

Answer 1

Я просто знаю, что вы можете запустить через путь с обычаем Javascript, может быть, вы можете используйте это для линии, а также:

НОВЫЙ РЕДАКТИРОВАНИЕ ДЛЯ ОБРАБОТКИ ФУНКЦИЙ E

// Get a reference to the <path> 
 
var path = document.querySelector('#star-path'); 
 

 
// Get length of path... ~577px in this case 
 
var pathLength = path.getTotalLength(); 
 

 
// Make very long dashes (the length of the path itself) 
 
path.style.strokeDasharray = pathLength + ' ' + pathLength; 
 

 
// Offset the dashes so the it appears hidden entirely 
 
path.style.strokeDashoffset = pathLength; 
 

 
// Jake Archibald says so 
 
// https://jakearchibald.com/2013/animated-line-drawing-svg/ 
 
path.getBoundingClientRect(); 
 

 
// When the page scrolls... 
 
window.addEventListener("scroll", function(e) { 
 
    
 
    // What % down is it? 
 
    // https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222 
 
    // Had to try three or four differnet methods here. Kind of a cross-browser nightmare. 
 
    var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop)/(document.documentElement.scrollHeight - document.documentElement.clientHeight); 
 
    
 
    // Length to offset the dashes 
 
    var drawLength = pathLength * scrollPercentage; 
 
    
 
    // Draw in reverse 
 
    path.style.strokeDashoffset = pathLength - drawLength; 
 
    
 
    // When complete, remove the dash array, otherwise shape isn't quite sharp 
 
// Accounts for fuzzy math 
 
    if (scrollPercentage >= 0.99) { 
 
    path.style.strokeDasharray = "none"; 
 
    
 
    } else { 
 
    path.style.strokeDasharray = pathLength + ' ' + pathLength; 
 
    } 
 
    
 
});

body { 
 
    /* feel free to change height */ 
 
    height: 5000px; 
 
} 
 

 
#star-svg { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: -75px 0 0 -75px; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.6 107.6" id="star-svg"> 
 
\t <path fill="none" stroke="black" stroke-width="2" id="star-path" d="M43.7,65.8L19.9,83.3c-2.9,1.9-5.1,3.2-7.9,3.2c-5.7,0-10.5-5.1-10.5-10.8 
 
\t \t c0-4.8,3.8-8.2,7.3-9.8l27.9-12L8.8,41.4c-3.8-1.6-7.3-5.1-7.3-9.8c0-5.7,5.1-10.5,10.8-10.5c2.9,0,4.8,1,7.6,3.2l23.8,17.4 
 
\t \t l-3.2-28.2c-1-6.7,3.5-12,9.8-12c6.3,0,10.8,5.1,9.8,11.7L57,41.8l23.8-17.4c2.9-2.2,5.1-3.2,7.9-3.2c5.7,0,10.5,4.8,10.5,10.5 
 
\t \t c0,5.1-3.5,8.2-7.3,9.8L63.9,53.8l27.9,12c3.8,1.6,7.3,5.1,7.3,10.1c0,5.7-5.1,10.5-10.8,10.5c-2.5,0-4.8-1.3-7.6-3.2L57,65.8 
 
\t \t l3.2,28.2c1,6.7-3.5,12-9.8,12c-6.3,0-10.8-5.1-9.8-11.7L43.7,65.8z"/> 
 
</svg>

Answer 2

Вы должны экспортировать ГСВ в пути. а затем вы можете добавить анимацию прокрутки в зависимости от области просмотра. Вот тестовый сервер, на котором запущен ваш экземпляр. demo project