如何做响应路径

时间:2018-11-08 07:56:52

标签: javascript css svg path

任何人都知道如何按照以下链接进行响应式svg路径吗?

https://visitmaine.com/quarterly/chasingthesun/explore/arrival/go

我真的找不到方法。

我做了我的测试网站https://ideal-works.com/ngeeannopenhouse/

function positionCar()
{
  var  scrollY = window.scrollY || window.pageYOffset;
  var  maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
  var  path = document.getElementById("path1");
  // Calculate distance along the path the car should be for the current scroll amount
  var  pathLen = path.getTotalLength();
  var  dist = pathLen * scrollY / maxScrollY;
  var  pos = path.getPointAtLength(dist);
 
  // Position the car at "pos" totated by "angle"
  var  car = document.getElementById("car");
  car.setAttribute("transform", "translate(" + pos.x + "," + pos.y + ")");
}


// Reposition car whenever there is a scroll event
window.addEventListener("scroll", positionCar);

// Position the car initially
positionCar();
<svg id="svgPath" width="100%" height="100%" x="0px" y="0px" style="overflow: visible;">

	
	<path d="M585.1,30v1242.2c0,0-25.8,233.9,66.5,367.8s175.5,257.8-55.2,434.3c0,0-86.9,57.9-179.1,66.9
	c-92.3,9-89.6,52.5-88.7,90.5c0.9,38,48.9,115.8,141.1,143.9s115.8,59.7,115.8,104.9c0,45.2,0,1191.5,0,1191.5s1.8,22.6-19.9,56.1
	c-21.7,33.5-59.7,85-86.9,143.9c0,0-52.5,93.2,148.4,310.3c0,0,153.8,146.6,212.6,240.7s-117.6,165.6-186.4,203.6
	c-68.8,38-294,143.9-274.1,306.7c19.9,162.9,154.7,251.5,218.9,337.5s131.2,163.8,125.8,301.3c-5.4,137.5-91.4,215.3-110.4,252.4
	c-19,37.1-28,53.4-28,70.6s0,1836.6,0,1836.6s-10,54.3,42.5,129.4c52.5,75.1,49.8,105.9,15.4,185.5s-111.3,191.8-57.9,318.5
	s63.3,194.5,19,291.3c0,0-18.1,31.7-19,58.8c-0.9,27.1,0,1690.9,0,1690.9s-11.8,60.6,45.2,124.9c57,64.2,148.4,137.5,147.5,198.1
	s-109.5,98.6-171,140.2c-61.5,41.6-154.7,98.6-150.2,181.9c4.5,83.2,152,167.4,189.1,182.8c37.1,15.4,203.6,70.6,245.2,209
	c41.6,138.4-180.9,336.6-300.4,439.7c-119.4,103.1-228,191.8-200.8,274.1c27.1,82.3,103.1,195.4,145.7,247.9
	c42.5,52.5,201.8,219.8,192.7,323c-9,103.1-73.3,172.8-105.9,208.1c-32.6,35.3-33.5,59.7-34.4,85s-2.7,540.9-2.7,1780.9"
		  id="path1" 
												   style="opacity: 0.25; fill: rgba(255, 255, 255, 0); stroke: white; stroke-width: 2px; stroke-dashoffset: 1e-05; stroke-dasharray: none;"></path>
			
	
	<image id="car" xlink:href="https://ideal-works.com/ngeeannopenhouse/wp-content/uploads/2018/10/Gradient-marker-02.png" height="34" width="34"></image>
	</svg>

0 个答案:

没有答案