如何滚动和动画SVG（绘图）？
我在插画家中绘制了一个SVG图像。 它类似于时间表。 当我向上和向下滚动页面时（我使用jQuery / JavaScript），我希望它能够进出。
事实上，没有JavaScript，布局是可以的（只有一件事），并且没有任何代码。 如果没有JavaScript（或没有JavaScriptfunction的用户），用户已经看到了SVG图像，只需滚动到页面底部，而不会绘制图像。
问题1
我想用JavaScript或jQuery来做这件事。 我已经研究过高低，尽管我理解了一些JavaScript和jQuery原理，但我并没有理解。
我看过Greensock的“Draw SVG”，但你必须付费才能访问该插件，我看过“snap.svg”，但似乎没有得到很好的记录，似乎不支持滚动。 在jQuery或纯JavaScript中有没有一个公平的方法呢？
问题2
线的起点（左侧）距离边缘几个像素。 我似乎无法让它与窗户的左侧齐平。 有什么想法？
对不起，我暂时无法发布图片
BGDR creative /* This section isfor the default overall styling for the entire site */ html { margin-top: -27px; padding: 0; } body { font-family: quicksand, didact-gothic, sans-serif; text-rendering: geometricPrecision; text-rendering: optimizeLegibility; margin:0; font-style: normal; font-weight: 300; height: auto; width: 100%; /*background-color: grey;*/ } /*This section isfor the header section that includes the header itself, my h1 text logo, the nav bar and the top social buttons*/ header { /*background-color: hsla(359,70%,46%,1.00);*/ position: fixed; width:100%; height:20%; z-index:2; } /*This h1 is in the header section and the h1 has an ID=logo and is in 2 sections, id=bgdr and id=creative.*/ h1 { /*background-color: orange;*/ font-size: 4em; text-align: justify; color: black; margin-top: 41px; margin-right: 41px; margin-left: 19px; margin-bottom: 41px; position: fixed; } #logo { line-height: 30px; font-size: 4.em; text-align: justify; letter-spacing: 0.0em; padding-top: 10px; padding-bottom: 2px; padding-left: 5px; } /*#bgdr and #creative IDs are part of the h1 (#logo). They are in 2 IDs so that I can adjust the BGDR and creative text independantly*/ #bgdr { text-align: justify; } #creative { font-size: 0.6em; text-align: justify; padding-top: 0px; letter-spacing: 0.065em; padding-left: 4px; } /* the "a" selector is followed by "link, visited and hover" to animate the states of menu/text links throughout the page/site*/ a:link { color: hsla(0,0%,0%,1.00); -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s; -o-transition: color 0.5s; transition: color 0.5s; text-decoration:none; font-weight:500; } a:visited { color: hsla(0,0%,0%,1.00); } a:hover { color: hsla(0,0%,72%,1.00); } a:active { font-weight: 800; } /*the ul, li, and .nav control the top nav menu. The ul is the table, il are the cells. (front page, about, contact, etc.)*/ ul { /*background-color: blue;*/ float: right; position: inherit; margin-top: 60px; margin-right: 25px; margin-bottom: 0px; padding: 0em; font-size: 1.15em; } li { float: right; display: block; width: inherit; margin-left: 3em; } /*This is a class for my social buttons that are just below the menu (not large buttons at the bottom of the page*/ .social { position: inherit; bottom: auto; display: block; width: 11em; background-color: green; right: 25px; padding-top: 2px; padding-right: 0px; padding-left: 2px; padding-bottom: 2px; top: 85px; } /*h2=page name eg About h3=Sound/music/web h4=long version*/ h2, h3, h4 { text-align: center; } /*h2 is the title of each page eg "ABOUT"*/ h2 { font-size: 2em; position: relative; font-style: normal; font-weight: 400; } h4 { font-weight:500; font-size:1.4em } h2+p { text-align:center; } /*web text*/ p { font-size: 1.1em; text-align: justify; } main { position: relative; top: 240px; width: 100%; margin-top: 0em; margin-right: auto; margin-left: auto; margin-bottom: auto; background: rgba(255,255,255,0); background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(45%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 ); padding-bottom: 5px; } .dotimg { background-position:right; background-size:100% 100%; right: 1em; position: fixed; /*background-size: 5em 3em;*/ opacity: 0.4; bottom: 0em; } /* This is for the CONTACT page only*/ form { max-width:520px; margin:35px auto; } .feedback-input { color:black; font-family: quicksand, Helvetica, Arial, sans-serif; font-weight:300; font-size: 18px; border-radius: 5px; line-height: 22px; background-color: transparent; border:2px solid black; transition: all 0.3s; padding: 13px; margin-bottom: 15px; width:100%; box-sizing: border-box; outline:0; } .feedback-input:focus { border:3px solid black; } textarea { height: 250px; line-height: 150%; resize:vertical; } [type="submit"] { font-family: 'quicksand', Arial, Helvetica, sans-serif; width: 100%; background-color: white; border-radius:10px; border-color:black; cursor:pointer; color:black; font-size:24px; padding-top:10px; padding-bottom:10px; transition: all 0.4s; margin-top:-4px; font-weight:700; } [type="submit"]:hover { background:#85BEE4; } /*This is the SVG element that has all the paths and text within it*/ svg { position: absolute; margin: 0; top: 0; left: 0; right: 0px; bottom: 0px; padding-right: 0px; width: 100%; height: 100%; } .linePath { stroke-dasharray: 1000; stroke-dashoffset: 50; } #frame { height: 3000px; } footer { position: static; display:block; left:0px; bottom:0; } BGDR
creative
.st0{font-family:'ProximaNovaSoft-Regular';} .st1{font-size:52px;} .st2{font-family:'ProximaNovaSoft-Regular';} .st3{font-size:52px;} .st4{letter-spacing:-2;} </> SOUND FILM ANIM A TION WEB $(document).ready(function() { //variable for the 'stroke-dashoffset' unit var $dashOffset = $(".linePath").css("stroke-dashoffset"); //on a scroll event - execute function $(window).scroll(function() { //calculate how far down the page the user is var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100); //convert dashoffset pixel value to interger var $newUnit = parseInt($dashOffset, 10); //get the value to be subtracted from the 'stroke-dashoffset' var $offsetUnit = $percentageComplete * ($newUnit / 100); //set the new value of the dashoffset to create the drawing effect $(".linePath").css("stroke-dashoffset", $newUnit - $offsetUnit); }); });