css - 滚动窗口时运行绘图 SVG-6ren

css - 滚动窗口时运行绘图 SVG

转载作者：行者123 更新时间：2023-11-28 17:15:30

我有 svg 并且我使用@keyframes 为这个 svg 放置动画..它正在工作..

但我的问题是:当我们滚动窗口(浏览器)时如何绘制这个 svg...

因此，当用户向下滚动时，此 svg 开始绘制....

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<style>
            .oa-hotel {
	          fill: #FFF;
              stroke: #FFF;
              stroke-dasharray: 500;
              stroke-dashoffset: 500;
            }
            .oa-hotel-animate {
              -webkit-animation: dash 5s linear alternate;
              animation: dash 5s linear alternate;
            }
            @keyframes dash {
                from {
                    stroke-dashoffset: 500; fill: #FFF !important;
                    fill: black;
                }
                to {
                    stroke-dashoffset: 0; fill: #FFF !important;
                    fill: white;
                }
            } 
            @-webkit-keyframes dash {
                from {
                    stroke-dashoffset: 500;
                    fill: black;
                }
                to {
                    stroke-dashoffset: 0;
                    fill: white;
                }
            }             		
	</style>
</head>
<body style="background: black;">

<svg id="ps4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="900px" viewBox="0 0 600 318" enable-background="new 0 0 600 318" xml:space="preserve">

	<path class="oa-hotel oa-hotel-animate" d="M136.1,10.7c0.3,0.7,0.4,0.9,0.5,1.2c4.3,10.2,8.5,20.3,12.8,30.5c3.3,7.9,6.6,15.7,9.9,23.6
	c0.8,1.8,2.6,2.6,4.2,1.7c1.8-0.9,0.8-2.2,0.3-3.4c-5.1-12.3-10.3-24.6-15.5-37c-3.2-7.6-6.4-15.2-9.5-22.8
	c-0.6-1.4-1.4-2.2-3.1-2.1c-1.6,0-2,1-2.5,2.1c-2.1,5-4.2,10-6.3,15c-2.4,5.7-4.8,11.3-7,17c-0.3,0.8-0.3,2,0.1,2.6
	c0.9,1.1,3.9,0.2,4.5-1.2c1.1-2.6,2.2-5.3,3.3-7.9C130.6,23.8,133.2,17.4,136.1,10.7z M35.8,37.3c0.4,9.8,5.3,19.4,15.5,26
	c2.1,1.4,2.9,1.1,3.8-1.3c0.7-1.6-0.5-2.3-1.5-3C41.9,51,38.6,38.7,41.9,26.9C46.3,11.7,62.9,3,78,7.8c2.1,0.7,3,0.2,3.7-2
	c0.7-2-0.8-2.3-2.2-2.7C74.5,1.5,69.3,1.1,64,1.9C48,4.5,35.9,18.7,35.8,37.3z M103.2,35.2C102.8,23.6,98,14.3,88.6,7.5
	c-1.3-0.9-2.2-0.9-3.1,0.5c-1,1.6-0.9,2.7,0.5,3.6c9.9,6.6,14.7,20.1,11.1,31.5c-3.5,11.4-11.2,18.2-22.9,20.3
	c-4.2,0.8-8.4,0.5-12.6-0.7c-1.6-0.4-2.4,0.3-3.1,2.4c-0.5,1.5,0.5,1.8,1.6,2.2c4.1,1.4,8.3,1.7,12.6,1.3
	C90.9,66.8,103.5,51,103.2,35.2z M134.1,50.4c3.9,0,7.9,0,11.8,0c1,0,2,0,2.1-1.4c0.1-1.3-1.8-3.4-3.1-3.4c-8,0-15.9-0.1-23.9,0.1
	c-2.3,0-4.9,0.6-6,2.9c-2.6,5.6-4.9,11.3-7.2,16.9c-0.2,0.5,0.2,1.7,0.7,2c1.6,1,3.5,0.2,4.2-1.5c1.8-4.2,3.7-8.4,5.3-12.7
	c0.8-2.2,2.3-3,4.5-3C126.4,50.5,130.2,50.4,134.1,50.4z M64,1.9"/>
	<!-- TEXT -->
	<path class="oa-hotel" d="M46.2,105.6v1h-4.7v4.1h-1v-9.1h1v4.1H46.2z M46.9,105.6L46.9,105.6l-0.1,1h0.1v4.1h1v-9.1h-1V105.6z M56.8,103.2l-0.7,0.7
	c0.2,0.3,0.4,0.5,0.6,0.9c0.2,0.4,0.3,0.9,0.3,1.4c0,0.5-0.1,1-0.3,1.4c-0.2,0.4-0.4,0.8-0.8,1.1c-0.3,0.3-0.7,0.6-1.1,0.8
	c-0.4,0.2-0.9,0.3-1.4,0.3c-0.5,0-1-0.1-1.4-0.3c-0.3-0.1-0.6-0.4-0.9-0.6l-0.7,0.7c0.4,0.3,0.7,0.6,1.2,0.8
	c0.5,0.2,1.1,0.4,1.8,0.4c0.6,0,1.2-0.1,1.8-0.4c0.5-0.2,1-0.6,1.4-1c0.4-0.4,0.7-0.9,1-1.4c0.2-0.5,0.4-1.1,0.4-1.8
	c0-0.6-0.1-1.2-0.4-1.8C57.4,103.9,57.1,103.5,56.8,103.2z M50.2,107.5c-0.2-0.4-0.3-0.9-0.3-1.4c0-0.5,0.1-1,0.3-1.4
	c0.2-0.4,0.4-0.8,0.8-1.1c0.3-0.3,0.7-0.6,1.1-0.8c0.4-0.2,0.9-0.3,1.4-0.3c0.5,0,1,0.1,1.4,0.3c0.3,0.1,0.6,0.4,0.8,0.6l0.7-0.7
	c-0.4-0.3-0.7-0.6-1.2-0.8c-0.5-0.2-1.1-0.4-1.8-0.4c-0.6,0-1.2,0.1-1.8,0.4c-0.5,0.2-1,0.6-1.4,1c-0.4,0.4-0.7,0.9-1,1.4
	c-0.2,0.6-0.4,1.1-0.4,1.8c0,0.6,0.1,1.2,0.4,1.8c0.2,0.4,0.5,0.8,0.8,1.1l0.7-0.7C50.5,108,50.3,107.8,50.2,107.5z M57.7,102.5h2.9
	v0.1h1v-0.1h2.9v-1h-6.8V102.5z M60.6,110.6h1v-7.4h-1V110.6z M65.5,110.6h1v-1h0v-3.1h0v-1h0v-3.1h0v-0.9h0.7v0.9h4.4v-1h-6V110.6z
	 M71.5,110.6v-1h-4.4v1H71.5z M70.2,106.6v-1h-3v1H70.2z M73.5,109.7v-8.1h-1v9.1h1.2v-1H73.5z M74.4,110.6h4.2v-1h-4.2V110.6z
	 M82.5,109.7c-0.3,0-0.5,0-0.8-0.1c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.6l0-0.4h-1l0,0.4v0.1
	c0,0.3,0.1,0.7,0.2,1c0.2,0.3,0.4,0.6,0.6,0.8s0.6,0.4,0.9,0.5c0.4,0.1,0.7,0.2,1.1,0.2h0.4v-1H82.5z M85.6,106.5
	c-0.2-0.2-0.5-0.4-0.8-0.6c-0.3-0.1-0.6-0.2-1-0.3h0c0,0-0.2,0-0.7,0v0h-0.4h0h-0.1c-0.3,0-0.5-0.1-0.7-0.1
	c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.6c0-0.2,0.1-0.4,0.2-0.6c0.1-0.2,0.2-0.4,0.4-0.5
	c0.2-0.1,0.4-0.2,0.6-0.3s0.5-0.1,0.8-0.1h0.1v-0.9h0.3c-0.1,0-0.1,0-0.2,0h-0.2c-0.4,0-0.8,0.1-1.1,0.2s-0.7,0.3-0.9,0.5
	c-0.3,0.2-0.5,0.5-0.6,0.8c-0.2,0.3-0.2,0.6-0.2,1c0,0.9,0.5,1.6,1.5,2.2c0.2,0.1,0.4,0.2,0.8,0.2c0.3,0,0.6,0.1,0.9,0.1h0.2h0.1h0
	c0.3,0,0.5,0,0.8,0.1c0.2,0.1,0.4,0.2,0.6,0.3c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.4,0.2,0.6c0,0.2-0.1,0.4-0.2,0.6
	c-0.1,0.2-0.2,0.4-0.4,0.5c-0.2,0.1-0.4,0.2-0.6,0.3c-0.1,0-0.3,0.1-0.5,0.1v1c0.3,0,0.6,0,0.8-0.1c0.4-0.1,0.7-0.3,0.9-0.5
	c0.3-0.2,0.5-0.5,0.6-0.8c0.2-0.3,0.2-0.6,0.2-1c0-0.3-0.1-0.6-0.2-0.9C85.9,107,85.8,106.7,85.6,106.5z M83.7,102.6
	c0.2,0.1,0.4,0.2,0.6,0.3c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.4,0.2,0.6l0,0.3h1l0-0.4c0-0.3-0.1-0.6-0.3-0.9
	c-0.2-0.3-0.4-0.5-0.6-0.8c-0.3-0.2-0.6-0.4-0.9-0.5c-0.2-0.1-0.4-0.1-0.5-0.1v0.9C83.6,102.6,83.7,102.6,83.7,102.6z M105.9,101.6
	v0.9h2.2c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6c0,0.2,0,0.4-0.1,0.6
	c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1h-2.2v1.6l3.9,3.5h1.4l-4.6-4.1h1.5
	c0.3,0,0.7-0.1,1-0.2c0.3-0.1,0.6-0.3,0.8-0.5c0.2-0.2,0.4-0.5,0.5-0.8c0.1-0.3,0.2-0.6,0.2-1c0-0.3-0.1-0.7-0.2-1
	c-0.1-0.3-0.3-0.6-0.5-0.8c-0.2-0.2-0.5-0.4-0.8-0.5c-0.3-0.1-0.6-0.2-1-0.2 M104.5,101.5v9.1h0.7v-9.1 M118.2,110.6v-1h-4.4v1
	H118.2z M116.9,106.6v-1h-3v1H116.9z M112.2,110.6h0.9v-9.1h0.7v0.9h4.4v-1h-6V110.6z M124.9,106.5c-0.2-0.2-0.5-0.4-0.8-0.6
	c-0.3-0.1-0.6-0.2-1-0.3h0c0,0-0.2,0-0.7,0v0h-0.4h0H122c-0.3,0-0.5-0.1-0.7-0.1c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5
	c-0.1-0.2-0.1-0.4-0.1-0.6c0-0.2,0.1-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.4-0.5c0.2-0.1,0.4-0.2,0.6-0.3c0.1,0,0.2,0,0.4-0.1v-1
	c-0.3,0-0.5,0-0.7,0.1c-0.4,0.1-0.7,0.3-0.9,0.5c-0.3,0.2-0.5,0.5-0.6,0.8c-0.2,0.3-0.2,0.6-0.2,1c0,0.9,0.5,1.6,1.5,2.2
	c0.2,0.1,0.4,0.2,0.7,0.2c0.3,0,0.6,0.1,0.9,0.1h0.2h0.1h0c0.3,0,0.5,0,0.8,0.1c0.2,0.1,0.4,0.2,0.6,0.3s0.3,0.3,0.4,0.5
	c0.1,0.2,0.2,0.4,0.2,0.6c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.2-0.2,0.4-0.4,0.5s-0.4,0.2-0.6,0.3c-0.2,0.1-0.5,0.1-0.8,0.1h-0.2v1h0.2
	c0.4,0,0.8-0.1,1.1-0.2c0.4-0.1,0.7-0.3,0.9-0.5c0.3-0.2,0.5-0.5,0.6-0.8c0.2-0.3,0.2-0.6,0.2-1c0-0.3-0.1-0.6-0.2-0.9
	C125.2,107,125.1,106.7,124.9,106.5z M122.4,101.6v0.9c0.2,0,0.5,0,0.7,0.1c0.2,0.1,0.4,0.2,0.6,0.3c0.2,0.1,0.3,0.3,0.4,0.5
	c0.1,0.2,0.2,0.4,0.2,0.6l0,0.3h1l0-0.4c0-0.3-0.1-0.6-0.3-0.9c-0.2-0.3-0.4-0.5-0.6-0.8c-0.3-0.2-0.6-0.4-0.9-0.5
	C123.1,101.6,122.7,101.5,122.4,101.6 M121.1,109.6c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.6
	l0-0.4h-1l0,0.4v0.1c0,0.3,0.1,0.7,0.2,1c0.2,0.3,0.4,0.6,0.6,0.8c0.3,0.2,0.6,0.4,0.9,0.5c0.3,0.1,0.7,0.2,1,0.2v-1
	C121.5,109.7,121.3,109.6,121.1,109.6z M134.3,102.9c-0.4-0.4-0.9-0.7-1.4-1c-0.5-0.2-1.1-0.4-1.8-0.4c-0.6,0-1.2,0.1-1.8,0.4
	c-0.5,0.2-1,0.6-1.4,1c-0.4,0.4-0.7,0.9-1,1.4c-0.2,0.6-0.4,1.1-0.4,1.8c0,0.6,0.1,1.2,0.4,1.8c0.2,0.4,0.5,0.8,0.7,1.1l0.7-0.7
	c-0.2-0.2-0.4-0.5-0.5-0.8c-0.2-0.4-0.3-0.9-0.3-1.4c0-0.5,0.1-1,0.3-1.4c0.2-0.4,0.4-0.8,0.8-1.1c0.3-0.3,0.7-0.6,1.1-0.8
	c0.4-0.2,0.9-0.3,1.4-0.3c0.5,0,1,0.1,1.4,0.3c0.3,0.1,0.5,0.3,0.8,0.5l0.7-0.7l0.5,0.5l-0.6,0.6c0.2,0.3,0.5,0.6,0.6,0.9
	c0.2,0.4,0.3,0.9,0.3,1.4c0,0.5-0.1,1-0.3,1.4c-0.2,0.4-0.4,0.8-0.8,1.1c-0.3,0.3-0.7,0.6-1.1,0.8c-0.4,0.2-0.9,0.3-1.4,0.3
	c-0.5,0-0.9-0.1-1.4-0.3c-0.4-0.2-0.6-0.4-0.9-0.6l-0.7,0.7c0.4,0.3,0.7,0.6,1.2,0.8c0.5,0.2,1.1,0.4,1.8,0.4c0.6,0,1.2-0.1,1.8-0.4
	c0.5-0.2,1-0.6,1.4-1s0.7-0.9,1-1.4c0.2-0.5,0.4-1.1,0.4-1.8c0-0.6-0.1-1.2-0.4-1.8C135,103.8,134.7,103.3,134.3,102.9z
	 M138.3,101.6v0.9h1.9c0.2,0,0.4,0,0.6,0.1s0.4,0.2,0.5,0.3c0.1,0.1,0.2,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6c0,0.2,0,0.4-0.1,0.6
	c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1h-1.9v1.8l3.6,3.2h1.4l-4.6-4.1h1.5
	c0.3,0,0.7-0.1,1-0.2c0.3-0.1,0.6-0.3,0.8-0.5c0.2-0.2,0.4-0.5,0.5-0.8c0.1-0.3,0.2-0.6,0.2-1c0-0.3-0.1-0.7-0.2-1
	c-0.1-0.3-0.3-0.6-0.5-0.8c-0.2-0.2-0.5-0.4-0.8-0.5c-0.3-0.1-0.6-0.2-1-0.2 M136.6,101.5v9.1h1v-3.9l0.1,0v-1.2h-0.1v-3.1h0.1v-0.9
	 M147.2,102.5h2.9v-1h-6.8v1h2.9v0.1L147.2,102.5L147.2,102.5z M146.2,110.6h1v-7.4h-1V110.6z M153.1,109.7c-0.3,0-0.5,0-0.8-0.1
	c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.6l0-0.4h-1l0,0.4v0.1c0,0.3,0.1,0.7,0.2,1
	c0.1,0.3,0.4,0.6,0.6,0.8c0.3,0.2,0.6,0.4,0.9,0.5c0.4,0.1,0.7,0.2,1.1,0.2h0.2v-1H153.1z M156.6,107.3c-0.1-0.3-0.3-0.5-0.5-0.8
	c-0.2-0.2-0.5-0.4-0.8-0.6s-0.6-0.2-1-0.3h0c0,0-0.2,0-0.7,0v0h-0.4h0h-0.1c-0.3,0-0.5-0.1-0.7-0.1c-0.2-0.1-0.4-0.2-0.6-0.3
	c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.6c0-0.2,0.1-0.4,0.2-0.6c0.1-0.2,0.2-0.4,0.4-0.5c0.2-0.1,0.4-0.2,0.6-0.3
	c0.2-0.1,0.5-0.1,0.7-0.1v-0.9h0.5c-0.1,0-0.1,0-0.2,0h-0.2c-0.4,0-0.8,0.1-1.1,0.2c-0.4,0.1-0.7,0.3-0.9,0.5
	c-0.3,0.2-0.5,0.5-0.6,0.8c-0.2,0.3-0.2,0.6-0.2,1c0,0.9,0.5,1.6,1.5,2.2c0.2,0.1,0.4,0.2,0.8,0.2c0.3,0,0.6,0.1,0.9,0.1h0.2h0.1h0
	c0.3,0,0.5,0,0.7,0.1c0.2,0.1,0.4,0.2,0.6,0.3c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.4,0.2,0.6c0,0.2-0.1,0.4-0.2,0.6
	c-0.1,0.2-0.2,0.4-0.4,0.5c-0.2,0.1-0.4,0.2-0.6,0.3c-0.2,0.1-0.4,0.1-0.6,0.1v1c0.4,0,0.7-0.1,1-0.2c0.4-0.1,0.7-0.3,0.9-0.5
	c0.3-0.2,0.5-0.5,0.6-0.8c0.1-0.3,0.2-0.6,0.2-1C156.8,107.8,156.7,107.5,156.6,107.3z M154.3,102.6c0.2,0.1,0.4,0.2,0.6,0.3
	c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.4,0.2,0.6l0,0.3h1l0-0.4c0-0.3-0.1-0.6-0.3-0.9c-0.2-0.3-0.4-0.5-0.6-0.8
	c-0.3-0.2-0.6-0.4-0.9-0.5c-0.2-0.1-0.5-0.1-0.7-0.1v1C154.1,102.6,154.2,102.6,154.3,102.6z M98.5,105.7h-0.9c0,0.3,0,0.5-0.1,0.8
	c-0.1,0.3-0.1,0.5-0.2,0.7l-1.6-1.9c0.3-0.2,0.5-0.4,0.7-0.6c0.2-0.2,0.3-0.3,0.5-0.5c0.1-0.2,0.2-0.3,0.2-0.5s0.1-0.3,0.1-0.5
	c0-0.2,0-0.5-0.1-0.7c-0.1-0.2-0.2-0.4-0.3-0.6c-0.1-0.2-0.3-0.3-0.6-0.4c-0.2-0.1-0.5-0.1-0.9-0.1c-0.3,0-0.5,0-0.7,0.1
	c-0.2,0.1-0.4,0.2-0.6,0.4c-0.2,0.2-0.3,0.3-0.4,0.6c-0.1,0.2-0.1,0.5-0.1,0.7c0,0.2,0.1,0.5,0.2,0.7c0.1,0.2,0.2,0.4,0.4,0.6
	l0.5,0.6c-0.3,0.1-0.6,0.3-0.8,0.5c-0.2,0.2-0.5,0.4-0.6,0.6s-0.3,0.4-0.4,0.7c-0.1,0.2-0.2,0.5-0.2,0.8c0,0.3,0,0.5,0.1,0.8
	c0.1,0.3,0.2,0.5,0.5,0.7c0.2,0.2,0.5,0.4,0.8,0.5c0.3,0.1,0.7,0.2,1.1,0.2c0.3,0,0.6,0,0.8-0.1c0.2-0.1,0.4-0.1,0.6-0.2
	c0.2-0.1,0.3-0.2,0.5-0.3c0.1-0.1,0.3-0.2,0.4-0.4l0.6,0.8h1.3l-1.4-1.5c0.1-0.1,0.2-0.3,0.3-0.5c0.1-0.2,0.1-0.3,0.2-0.5
	c0.1-0.2,0.1-0.4,0.1-0.6C98.4,106.2,98.4,106,98.5,105.7z M94.9,105.7l1.8,2.3c-0.1,0.2-0.3,0.3-0.4,0.4c-0.1,0.1-0.2,0.2-0.4,0.3
	c-0.1,0.1-0.3,0.1-0.5,0.2c-0.2,0-0.4,0.1-0.6,0.1c-0.2,0-0.3,0-0.5-0.1c-0.2-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.2-0.3-0.3-0.4
	c-0.1-0.2-0.1-0.4-0.1-0.6c0-0.2,0-0.4,0.1-0.5c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.3-0.3,0.5-0.4C94.6,105.9,94.7,105.8,94.9,105.7z
	 M95.2,104.7l-0.4-0.5c-0.2-0.2-0.3-0.4-0.4-0.6c-0.1-0.2-0.1-0.4-0.1-0.5c0-0.3,0.1-0.5,0.3-0.7c0.2-0.2,0.4-0.2,0.7-0.2
	c0.2,0,0.4,0,0.5,0.1c0.1,0,0.2,0.1,0.3,0.2c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2,0,0.4c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2-0.1,0.4
	c-0.1,0.1-0.2,0.3-0.3,0.4C95.7,104.3,95.5,104.5,95.2,104.7z"/>

	<path class="oa-hotel oa-hotel-animate" d="M197.6,87.5c0,0.7-0.6,1.3-1.3,1.3H3.7c-0.7,0-1.3-0.6-1.3-1.3l0,0c0-0.7,0.6-1.3,1.3-1.3h192.6
				C197,86.2,197.6,86.8,197.6,87.5L197.6,87.5z"/>

</svg>

</body>
</html>

shareedit

最佳答案

试试这个我修改了我在这里找到的代码http://codepen.io/paintbycode/pen/JDbcF希望这会有所帮助。

 $(document).ready(function() {
  
  //set the units for the svg paths
  $(".path").css("stroke-dashoffset", "1000");
  $(".path").css("stroke-dasharray", "1000");

  //variable for the 'stroke-dashoffset' unit
  var $dashOffset = $(".path").css("stroke-dashoffset");//.star

  //on a scroll event - execute function
  $(window).scroll(function () {    
	
	var top = $(window).scrollTop();
	
    //calculate how far down the page the user is 
    var $percentageComplete = ((top/($("html").height()-$(window).height()))*100);    

    //convert dashoffset pixel value to interger
    var $newUnit = parseInt($dashOffset, 10); 

    //convert percentage complete unit to an interger
//    var $parsedPercentage = parseInt($percentageComplete, 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
    $(".path").css("stroke-dashoffset", $newUnit - $offsetUnit);
	$(".path").css("fill-opacity", 0  + top * .001);
	
	
  });

});

body {
	color: white;
	height: 2000px;
}


svg {
  position: fixed;
 
  left: 30%;
  
}


.path {
  stroke-dashoffset: 1000;
  stroke-dasharray: 1000;
}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scroll</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head>

<body style="background: black;">

<svg id="ps4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="900px" viewBox="0 0 600 318" enable-background="new 0 0 600 318" xml:space="preserve">


	 <g id="Group" stroke="#fff" stroke-width="1" fill="none"><!--CHANGE LINE COLOUR-->
    
    
	<path class="path" stroke="#fff" fill="#fff" fill-opacity="0" stroke-width="1" stroke-linecap="round" d="M136.1,10.7c0.3,0.7,0.4,0.9,0.5,1.2c4.3,10.2,8.5,20.3,12.8,30.5c3.3,7.9,6.6,15.7,9.9,23.6
	c0.8,1.8,2.6,2.6,4.2,1.7c1.8-0.9,0.8-2.2,0.3-3.4c-5.1-12.3-10.3-24.6-15.5-37c-3.2-7.6-6.4-15.2-9.5-22.8
	c-0.6-1.4-1.4-2.2-3.1-2.1c-1.6,0-2,1-2.5,2.1c-2.1,5-4.2,10-6.3,15c-2.4,5.7-4.8,11.3-7,17c-0.3,0.8-0.3,2,0.1,2.6
	c0.9,1.1,3.9,0.2,4.5-1.2c1.1-2.6,2.2-5.3,3.3-7.9C130.6,23.8,133.2,17.4,136.1,10.7z M35.8,37.3c0.4,9.8,5.3,19.4,15.5,26
	c2.1,1.4,2.9,1.1,3.8-1.3c0.7-1.6-0.5-2.3-1.5-3C41.9,51,38.6,38.7,41.9,26.9C46.3,11.7,62.9,3,78,7.8c2.1,0.7,3,0.2,3.7-2
	c0.7-2-0.8-2.3-2.2-2.7C74.5,1.5,69.3,1.1,64,1.9C48,4.5,35.9,18.7,35.8,37.3z M103.2,35.2C102.8,23.6,98,14.3,88.6,7.5
	c-1.3-0.9-2.2-0.9-3.1,0.5c-1,1.6-0.9,2.7,0.5,3.6c9.9,6.6,14.7,20.1,11.1,31.5c-3.5,11.4-11.2,18.2-22.9,20.3
	c-4.2,0.8-8.4,0.5-12.6-0.7c-1.6-0.4-2.4,0.3-3.1,2.4c-0.5,1.5,0.5,1.8,1.6,2.2c4.1,1.4,8.3,1.7,12.6,1.3
	C90.9,66.8,103.5,51,103.2,35.2z M134.1,50.4c3.9,0,7.9,0,11.8,0c1,0,2,0,2.1-1.4c0.1-1.3-1.8-3.4-3.1-3.4c-8,0-15.9-0.1-23.9,0.1
	c-2.3,0-4.9,0.6-6,2.9c-2.6,5.6-4.9,11.3-7.2,16.9c-0.2,0.5,0.2,1.7,0.7,2c1.6,1,3.5,0.2,4.2-1.5c1.8-4.2,3.7-8.4,5.3-12.7
	c0.8-2.2,2.3-3,4.5-3C126.4,50.5,130.2,50.4,134.1,50.4z M64,1.9"/>
	<!-- TEXT -->
	<path stroke="#fff" fill="#fff" stroke-width="0" d="M46.2,105.6v1h-4.7v4.1h-1v-9.1h1v4.1H46.2z M46.9,105.6L46.9,105.6l-0.1,1h0.1v4.1h1v-9.1h-1V105.6z M56.8,103.2l-0.7,0.7
	c0.2,0.3,0.4,0.5,0.6,0.9c0.2,0.4,0.3,0.9,0.3,1.4c0,0.5-0.1,1-0.3,1.4c-0.2,0.4-0.4,0.8-0.8,1.1c-0.3,0.3-0.7,0.6-1.1,0.8
	c-0.4,0.2-0.9,0.3-1.4,0.3c-0.5,0-1-0.1-1.4-0.3c-0.3-0.1-0.6-0.4-0.9-0.6l-0.7,0.7c0.4,0.3,0.7,0.6,1.2,0.8
	c0.5,0.2,1.1,0.4,1.8,0.4c0.6,0,1.2-0.1,1.8-0.4c0.5-0.2,1-0.6,1.4-1c0.4-0.4,0.7-0.9,1-1.4c0.2-0.5,0.4-1.1,0.4-1.8
	c0-0.6-0.1-1.2-0.4-1.8C57.4,103.9,57.1,103.5,56.8,103.2z M50.2,107.5c-0.2-0.4-0.3-0.9-0.3-1.4c0-0.5,0.1-1,0.3-1.4
	c0.2-0.4,0.4-0.8,0.8-1.1c0.3-0.3,0.7-0.6,1.1-0.8c0.4-0.2,0.9-0.3,1.4-0.3c0.5,0,1,0.1,1.4,0.3c0.3,0.1,0.6,0.4,0.8,0.6l0.7-0.7
	c-0.4-0.3-0.7-0.6-1.2-0.8c-0.5-0.2-1.1-0.4-1.8-0.4c-0.6,0-1.2,0.1-1.8,0.4c-0.5,0.2-1,0.6-1.4,1c-0.4,0.4-0.7,0.9-1,1.4
	c-0.2,0.6-0.4,1.1-0.4,1.8c0,0.6,0.1,1.2,0.4,1.8c0.2,0.4,0.5,0.8,0.8,1.1l0.7-0.7C50.5,108,50.3,107.8,50.2,107.5z M57.7,102.5h2.9
	v0.1h1v-0.1h2.9v-1h-6.8V102.5z M60.6,110.6h1v-7.4h-1V110.6z M65.5,110.6h1v-1h0v-3.1h0v-1h0v-3.1h0v-0.9h0.7v0.9h4.4v-1h-6V110.6z
	 M71.5,110.6v-1h-4.4v1H71.5z M70.2,106.6v-1h-3v1H70.2z M73.5,109.7v-8.1h-1v9.1h1.2v-1H73.5z M74.4,110.6h4.2v-1h-4.2V110.6z
	 M82.5,109.7c-0.3,0-0.5,0-0.8-0.1c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.6l0-0.4h-1l0,0.4v0.1
	c0,0.3,0.1,0.7,0.2,1c0.2,0.3,0.4,0.6,0.6,0.8s0.6,0.4,0.9,0.5c0.4,0.1,0.7,0.2,1.1,0.2h0.4v-1H82.5z M85.6,106.5
	c-0.2-0.2-0.5-0.4-0.8-0.6c-0.3-0.1-0.6-0.2-1-0.3h0c0,0-0.2,0-0.7,0v0h-0.4h0h-0.1c-0.3,0-0.5-0.1-0.7-0.1
	c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.6c0-0.2,0.1-0.4,0.2-0.6c0.1-0.2,0.2-0.4,0.4-0.5
	c0.2-0.1,0.4-0.2,0.6-0.3s0.5-0.1,0.8-0.1h0.1v-0.9h0.3c-0.1,0-0.1,0-0.2,0h-0.2c-0.4,0-0.8,0.1-1.1,0.2s-0.7,0.3-0.9,0.5
	c-0.3,0.2-0.5,0.5-0.6,0.8c-0.2,0.3-0.2,0.6-0.2,1c0,0.9,0.5,1.6,1.5,2.2c0.2,0.1,0.4,0.2,0.8,0.2c0.3,0,0.6,0.1,0.9,0.1h0.2h0.1h0
	c0.3,0,0.5,0,0.8,0.1c0.2,0.1,0.4,0.2,0.6,0.3c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.4,0.2,0.6c0,0.2-0.1,0.4-0.2,0.6
	c-0.1,0.2-0.2,0.4-0.4,0.5c-0.2,0.1-0.4,0.2-0.6,0.3c-0.1,0-0.3,0.1-0.5,0.1v1c0.3,0,0.6,0,0.8-0.1c0.4-0.1,0.7-0.3,0.9-0.5
	c0.3-0.2,0.5-0.5,0.6-0.8c0.2-0.3,0.2-0.6,0.2-1c0-0.3-0.1-0.6-0.2-0.9C85.9,107,85.8,106.7,85.6,106.5z M83.7,102.6
	c0.2,0.1,0.4,0.2,0.6,0.3c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.4,0.2,0.6l0,0.3h1l0-0.4c0-0.3-0.1-0.6-0.3-0.9
	c-0.2-0.3-0.4-0.5-0.6-0.8c-0.3-0.2-0.6-0.4-0.9-0.5c-0.2-0.1-0.4-0.1-0.5-0.1v0.9C83.6,102.6,83.7,102.6,83.7,102.6z M105.9,101.6
	v0.9h2.2c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6c0,0.2,0,0.4-0.1,0.6
	c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1h-2.2v1.6l3.9,3.5h1.4l-4.6-4.1h1.5
	c0.3,0,0.7-0.1,1-0.2c0.3-0.1,0.6-0.3,0.8-0.5c0.2-0.2,0.4-0.5,0.5-0.8c0.1-0.3,0.2-0.6,0.2-1c0-0.3-0.1-0.7-0.2-1
	c-0.1-0.3-0.3-0.6-0.5-0.8c-0.2-0.2-0.5-0.4-0.8-0.5c-0.3-0.1-0.6-0.2-1-0.2 M104.5,101.5v9.1h0.7v-9.1 M118.2,110.6v-1h-4.4v1
	H118.2z M116.9,106.6v-1h-3v1H116.9z M112.2,110.6h0.9v-9.1h0.7v0.9h4.4v-1h-6V110.6z M124.9,106.5c-0.2-0.2-0.5-0.4-0.8-0.6
	c-0.3-0.1-0.6-0.2-1-0.3h0c0,0-0.2,0-0.7,0v0h-0.4h0H122c-0.3,0-0.5-0.1-0.7-0.1c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5
	c-0.1-0.2-0.1-0.4-0.1-0.6c0-0.2,0.1-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.4-0.5c0.2-0.1,0.4-0.2,0.6-0.3c0.1,0,0.2,0,0.4-0.1v-1
	c-0.3,0-0.5,0-0.7,0.1c-0.4,0.1-0.7,0.3-0.9,0.5c-0.3,0.2-0.5,0.5-0.6,0.8c-0.2,0.3-0.2,0.6-0.2,1c0,0.9,0.5,1.6,1.5,2.2
	c0.2,0.1,0.4,0.2,0.7,0.2c0.3,0,0.6,0.1,0.9,0.1h0.2h0.1h0c0.3,0,0.5,0,0.8,0.1c0.2,0.1,0.4,0.2,0.6,0.3s0.3,0.3,0.4,0.5
	c0.1,0.2,0.2,0.4,0.2,0.6c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.2-0.2,0.4-0.4,0.5s-0.4,0.2-0.6,0.3c-0.2,0.1-0.5,0.1-0.8,0.1h-0.2v1h0.2
	c0.4,0,0.8-0.1,1.1-0.2c0.4-0.1,0.7-0.3,0.9-0.5c0.3-0.2,0.5-0.5,0.6-0.8c0.2-0.3,0.2-0.6,0.2-1c0-0.3-0.1-0.6-0.2-0.9
	C125.2,107,125.1,106.7,124.9,106.5z M122.4,101.6v0.9c0.2,0,0.5,0,0.7,0.1c0.2,0.1,0.4,0.2,0.6,0.3c0.2,0.1,0.3,0.3,0.4,0.5
	c0.1,0.2,0.2,0.4,0.2,0.6l0,0.3h1l0-0.4c0-0.3-0.1-0.6-0.3-0.9c-0.2-0.3-0.4-0.5-0.6-0.8c-0.3-0.2-0.6-0.4-0.9-0.5
	C123.1,101.6,122.7,101.5,122.4,101.6 M121.1,109.6c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.6
	l0-0.4h-1l0,0.4v0.1c0,0.3,0.1,0.7,0.2,1c0.2,0.3,0.4,0.6,0.6,0.8c0.3,0.2,0.6,0.4,0.9,0.5c0.3,0.1,0.7,0.2,1,0.2v-1
	C121.5,109.7,121.3,109.6,121.1,109.6z M134.3,102.9c-0.4-0.4-0.9-0.7-1.4-1c-0.5-0.2-1.1-0.4-1.8-0.4c-0.6,0-1.2,0.1-1.8,0.4
	c-0.5,0.2-1,0.6-1.4,1c-0.4,0.4-0.7,0.9-1,1.4c-0.2,0.6-0.4,1.1-0.4,1.8c0,0.6,0.1,1.2,0.4,1.8c0.2,0.4,0.5,0.8,0.7,1.1l0.7-0.7
	c-0.2-0.2-0.4-0.5-0.5-0.8c-0.2-0.4-0.3-0.9-0.3-1.4c0-0.5,0.1-1,0.3-1.4c0.2-0.4,0.4-0.8,0.8-1.1c0.3-0.3,0.7-0.6,1.1-0.8
	c0.4-0.2,0.9-0.3,1.4-0.3c0.5,0,1,0.1,1.4,0.3c0.3,0.1,0.5,0.3,0.8,0.5l0.7-0.7l0.5,0.5l-0.6,0.6c0.2,0.3,0.5,0.6,0.6,0.9
	c0.2,0.4,0.3,0.9,0.3,1.4c0,0.5-0.1,1-0.3,1.4c-0.2,0.4-0.4,0.8-0.8,1.1c-0.3,0.3-0.7,0.6-1.1,0.8c-0.4,0.2-0.9,0.3-1.4,0.3
	c-0.5,0-0.9-0.1-1.4-0.3c-0.4-0.2-0.6-0.4-0.9-0.6l-0.7,0.7c0.4,0.3,0.7,0.6,1.2,0.8c0.5,0.2,1.1,0.4,1.8,0.4c0.6,0,1.2-0.1,1.8-0.4
	c0.5-0.2,1-0.6,1.4-1s0.7-0.9,1-1.4c0.2-0.5,0.4-1.1,0.4-1.8c0-0.6-0.1-1.2-0.4-1.8C135,103.8,134.7,103.3,134.3,102.9z
	 M138.3,101.6v0.9h1.9c0.2,0,0.4,0,0.6,0.1s0.4,0.2,0.5,0.3c0.1,0.1,0.2,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6c0,0.2,0,0.4-0.1,0.6
	c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1h-1.9v1.8l3.6,3.2h1.4l-4.6-4.1h1.5
	c0.3,0,0.7-0.1,1-0.2c0.3-0.1,0.6-0.3,0.8-0.5c0.2-0.2,0.4-0.5,0.5-0.8c0.1-0.3,0.2-0.6,0.2-1c0-0.3-0.1-0.7-0.2-1
	c-0.1-0.3-0.3-0.6-0.5-0.8c-0.2-0.2-0.5-0.4-0.8-0.5c-0.3-0.1-0.6-0.2-1-0.2 M136.6,101.5v9.1h1v-3.9l0.1,0v-1.2h-0.1v-3.1h0.1v-0.9
	 M147.2,102.5h2.9v-1h-6.8v1h2.9v0.1L147.2,102.5L147.2,102.5z M146.2,110.6h1v-7.4h-1V110.6z M153.1,109.7c-0.3,0-0.5,0-0.8-0.1
	c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.6l0-0.4h-1l0,0.4v0.1c0,0.3,0.1,0.7,0.2,1
	c0.1,0.3,0.4,0.6,0.6,0.8c0.3,0.2,0.6,0.4,0.9,0.5c0.4,0.1,0.7,0.2,1.1,0.2h0.2v-1H153.1z M156.6,107.3c-0.1-0.3-0.3-0.5-0.5-0.8
	c-0.2-0.2-0.5-0.4-0.8-0.6s-0.6-0.2-1-0.3h0c0,0-0.2,0-0.7,0v0h-0.4h0h-0.1c-0.3,0-0.5-0.1-0.7-0.1c-0.2-0.1-0.4-0.2-0.6-0.3
	c-0.2-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.4-0.1-0.6c0-0.2,0.1-0.4,0.2-0.6c0.1-0.2,0.2-0.4,0.4-0.5c0.2-0.1,0.4-0.2,0.6-0.3
	c0.2-0.1,0.5-0.1,0.7-0.1v-0.9h0.5c-0.1,0-0.1,0-0.2,0h-0.2c-0.4,0-0.8,0.1-1.1,0.2c-0.4,0.1-0.7,0.3-0.9,0.5
	c-0.3,0.2-0.5,0.5-0.6,0.8c-0.2,0.3-0.2,0.6-0.2,1c0,0.9,0.5,1.6,1.5,2.2c0.2,0.1,0.4,0.2,0.8,0.2c0.3,0,0.6,0.1,0.9,0.1h0.2h0.1h0
	c0.3,0,0.5,0,0.7,0.1c0.2,0.1,0.4,0.2,0.6,0.3c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.4,0.2,0.6c0,0.2-0.1,0.4-0.2,0.6
	c-0.1,0.2-0.2,0.4-0.4,0.5c-0.2,0.1-0.4,0.2-0.6,0.3c-0.2,0.1-0.4,0.1-0.6,0.1v1c0.4,0,0.7-0.1,1-0.2c0.4-0.1,0.7-0.3,0.9-0.5
	c0.3-0.2,0.5-0.5,0.6-0.8c0.1-0.3,0.2-0.6,0.2-1C156.8,107.8,156.7,107.5,156.6,107.3z M154.3,102.6c0.2,0.1,0.4,0.2,0.6,0.3
	c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.4,0.2,0.6l0,0.3h1l0-0.4c0-0.3-0.1-0.6-0.3-0.9c-0.2-0.3-0.4-0.5-0.6-0.8
	c-0.3-0.2-0.6-0.4-0.9-0.5c-0.2-0.1-0.5-0.1-0.7-0.1v1C154.1,102.6,154.2,102.6,154.3,102.6z M98.5,105.7h-0.9c0,0.3,0,0.5-0.1,0.8
	c-0.1,0.3-0.1,0.5-0.2,0.7l-1.6-1.9c0.3-0.2,0.5-0.4,0.7-0.6c0.2-0.2,0.3-0.3,0.5-0.5c0.1-0.2,0.2-0.3,0.2-0.5s0.1-0.3,0.1-0.5
	c0-0.2,0-0.5-0.1-0.7c-0.1-0.2-0.2-0.4-0.3-0.6c-0.1-0.2-0.3-0.3-0.6-0.4c-0.2-0.1-0.5-0.1-0.9-0.1c-0.3,0-0.5,0-0.7,0.1
	c-0.2,0.1-0.4,0.2-0.6,0.4c-0.2,0.2-0.3,0.3-0.4,0.6c-0.1,0.2-0.1,0.5-0.1,0.7c0,0.2,0.1,0.5,0.2,0.7c0.1,0.2,0.2,0.4,0.4,0.6
	l0.5,0.6c-0.3,0.1-0.6,0.3-0.8,0.5c-0.2,0.2-0.5,0.4-0.6,0.6s-0.3,0.4-0.4,0.7c-0.1,0.2-0.2,0.5-0.2,0.8c0,0.3,0,0.5,0.1,0.8
	c0.1,0.3,0.2,0.5,0.5,0.7c0.2,0.2,0.5,0.4,0.8,0.5c0.3,0.1,0.7,0.2,1.1,0.2c0.3,0,0.6,0,0.8-0.1c0.2-0.1,0.4-0.1,0.6-0.2
	c0.2-0.1,0.3-0.2,0.5-0.3c0.1-0.1,0.3-0.2,0.4-0.4l0.6,0.8h1.3l-1.4-1.5c0.1-0.1,0.2-0.3,0.3-0.5c0.1-0.2,0.1-0.3,0.2-0.5
	c0.1-0.2,0.1-0.4,0.1-0.6C98.4,106.2,98.4,106,98.5,105.7z M94.9,105.7l1.8,2.3c-0.1,0.2-0.3,0.3-0.4,0.4c-0.1,0.1-0.2,0.2-0.4,0.3
	c-0.1,0.1-0.3,0.1-0.5,0.2c-0.2,0-0.4,0.1-0.6,0.1c-0.2,0-0.3,0-0.5-0.1c-0.2-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.2-0.3-0.3-0.4
	c-0.1-0.2-0.1-0.4-0.1-0.6c0-0.2,0-0.4,0.1-0.5c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.3-0.3,0.5-0.4C94.6,105.9,94.7,105.8,94.9,105.7z
	 M95.2,104.7l-0.4-0.5c-0.2-0.2-0.3-0.4-0.4-0.6c-0.1-0.2-0.1-0.4-0.1-0.5c0-0.3,0.1-0.5,0.3-0.7c0.2-0.2,0.4-0.2,0.7-0.2
	c0.2,0,0.4,0,0.5,0.1c0.1,0,0.2,0.1,0.3,0.2c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2,0,0.4c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2-0.1,0.4
	c-0.1,0.1-0.2,0.3-0.3,0.4C95.7,104.3,95.5,104.5,95.2,104.7z"/>

	<path class="path" fill="#fff" fill-opacity="0" d="M197.6,87.5c0,0.7-0.6,1.3-1.3,1.3H3.7c-0.7,0-1.3-0.6-1.3-1.3l0,0c0-0.7,0.6-1.3,1.3-1.3h192.6
				C197,86.2,197.6,86.8,197.6,87.5L197.6,87.5z"/>
	 </g>
</svg>

</body>

关于css - 滚动窗口时运行绘图 SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28621888/

文章推荐： javascript - JS中如何获取匹配字符串的索引

文章推荐： javascript - 媒体查询 - 随着动态内容宽度的变化而改变 CSS

文章推荐： css - 无法设置 h1 标签及其内容的样式

文章推荐： html - 如何在图像周围使用 CSS 设置透明边框？

svg - 用于将页内 SVG 代码下载为 SVG 文件的按钮？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
svg - 如何将一个 SVG 元素的内容复制到另一个 SVG 元素并保持同步
有两个 SVG 元素( SVG1 和 SVG2 )，其中 SVG1 是一个包含各种元素的大区域，会不时添加、删除和重新定位。另一方面，SVG2 需要用作图标化表示(小) SVG1 的版本，非常小，但
svg - 如何在 svg 文档中以编程方式创建 svg 元素？
我知道我们可以使用 document.createElementNS("http://www.w3.org/2000/svg","line"); 创建一个嵌入到html页面。但是，这种方法似乎不适用
svg - 我正在尝试使用 flutter svg，但加载黑色 svg
我正在尝试使用 Flutter SVG 依赖项，我将 svg 放入 Assets 中，在 pubspec.yaml 中设置，并在我的小部件中设置，但是，使用黑色容器加载 svg 我已经尝试过更改 sv
svg - 为什么将
为什么这样的演示:http://jsbin.com/ejorus/2/edit，将元素嵌套在另一个元素内？ JS
svg - 如何将 svg 代码保存为 .svg 图像？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
svg - 在另一个 SVG 元素中响应地居中 SVG 元素？
我正在尝试在 SVG 中做一些非常简单的事情: 将整个视口(viewport)分成两个矩形每个矩形的宽度应为视口(viewport)宽度的 50% 每个矩形的高度应为视口(viewport)高度的
svg - 我如何将一个 SVG 置于另一个 SVG 中
我试图将 play svg 居中放置在 SVG 圆圈的中间，但似乎不知道该怎么做。垂直和水平。 https://jsfiddle.net/c0qshm0t/17/ 最
svg - 用另一个 SVG 形状填充 SVG 形状
是否可以使用一个 SVG 形状作为另一个形状的填充？最佳答案您想使用 SVG Pattern .见 this example : 注意
svg - SVG 中跨路径的渐变
我在 SVG 中有一个非常简单的路径。 (预览:https://i.imgur.com/nVnxcRg.png) 我想要
svg - 如何将形状优美的多边形转换为 SVG？
我可以通过以下方式创建多边形: #!/usr/bin/env python from shapely.geometry import Polygon area = Polygon(((52, 13),
svg - Webpack:无法使用文件加载器显示 SVG 图像(svg 解析错误)
我使用 require 的 SVG 没有显示。在我的终端中，svg Assets 被发出并且路径在我的 html 中正确设置。但是，SVG 不会显示，而其他格式(如 jpg 或 png)可以显示
svg - SVG 中的混合模式
我在 SVG 混合模式中遇到了问题。我在 SVG 中有四个路径，我想用公式组合它们:(1*2) + (3*4)，即路径 1 和路径 2 应该使用乘法模式混合，类似地路径 3 和路径 4 应该使用混合相
svg - SVG 支持多少级递归？
我无法超过 2 个级别。 (在 Iceweasel 和 Chromium 上尝试过。) 作为测试，我尝试了 this earlier reply 中提供的代码的变体。 .这个由 3 个单独的文件组成，
svg - svg 中的剪辑路径和变换组合
请引用以下组中的clip-path 组 ID -> “container_svg_symbolGroup1_0(即圆圈符号)在我删除图表中可见的剪辑路径时不可见。问题是什么？为什么
svg - svg 形状中的文本区域
使用联合 js 在 svg 中创建了一个文本区域。但是，我无法在文本区域中输入任何文本。如何使文本区域可编辑？代码: var graph = new joint.dia.Graph;
svg - svg 动画可以在不丢失累积信息的情况下暂停吗？
您可以不受限制地停止和重复动画，但如果您重新启动一个不确定的动画，它将失去其累积值并从初始值开始。也许我应该用一个例子来澄清；拿这个动画: 如果我停止此动画，并开始影响同一对象旋转的不同动画(
svg - SVG、多条小路径和一条大路径哪个更有效？
如果我在浏览器中显示常规 SVG(作为独立文件或嵌入在 HTML 中)，在拥有大量单独的路径元素和一个巨大的路径元素之间在效率上是否有任何理论上的差异？我正在考虑将某种动画从一张图片变成一张完全不同
svg - SVG 中的海龟图形？
logo的turtlegraphics的svg路径中是否有等价物？而不是硬编码的 x 和 y 坐标，这也迫使我在移动更相对的“增量”方法时调整控制点。我的解决方案应该适用于 FOCS(Firefo
svg - SVG 图案中使用的圆帽线
目前正在使用 SVG 元素与一堆元素将使它具有一种逐渐变细的边缘。我尝试了很多不同的 CSS 样式来解决这个问题，但没有任何效果。这是一个带有针迹的圆圈的代码:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 滚动窗口时运行绘图 SVG