2021腾讯云限时秒杀，爆款1核2G云服务器298元/3年！（领取2860元代金券），
地址：https://cloud.tencent.com/act/cps/redirect?redirect=1062

2021阿里云最低价产品入口+领取代金券(老用户3折起)，
入口地址：https://www.aliyun.com/minisite/goods

推荐：JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

1.$和jquery在全局命名空间中定义的唯一两个变量。   2.jquery是工厂函数，不是构造函数。他返回一个新创建的对象。   3.jquery的四种调用方式：     <1>传递CSS

How i can create draw animation with css for SVG "line" element. I want to draw the line on scroll, with smooth effect. Some one have any ideas? I try to search this but i cant find this effect with line element. here is my html and 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>

and css:

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

Demo

javascript css svg scroll draw
  asked Mar 30 '16 at 16:06 Random User 31 3

---

---

 | 

2 Answers
2

I just know that you can run through a path with an custom javascript, maybe you can use that for a line aswell :)

NEW EDIT FOR SCROLLING FEATURE

// 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">
	<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
		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
		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
		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
		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>

  edited Mar 30 '16 at 16:30 answered Mar 30 '16 at 16:13 Kyon 64 8      but i want to draw for example 20% of line not full on scroll, more scroll more draw –  Random User Mar 30 '16 at 16:18      I've added my post including the scrolling feature :P @RandomUser –  Kyon Mar 30 '16 at 16:31

---

---

 |  -2

You need to export the svg in a path. and then you can add scroll animation depending on the viewport. Here is the testing server running your instance.demo project

  answered Jan 30 at 10:15 turashrocks 1

---

---

 |