SVG와 JS를 사용하여 어떻게이 효과를 얻을 수 있습니까?

Question

저는 이미 애니메이션 부분을 만들었습니다. JS를 사용하여 SVG 요소를 제어했습니다.

지금 내가 무엇을 달성하고자하는이 같은 것입니다 :

내가 경로의 가장 높은 위치에 뷰포트의 경계 사이의 거리를 얻을 수 paths.getBoundingClientRect()를 사용하려고, 그래서 나는 할 수있다 피크가 특정 위치에 도달하면 전체 배경이 바뀝니다. (if (rect.top < = 100) {...})

그러나 불규칙한 모양의 영역 속성을 제어하는 ​​방법을 알지 못합니다. 가능한 해결책이 있습니까?

대단히 감사합니다.

Answer 1

나는 이런 종류의 일에 http://d3js.org을 사용했습니다. 그것은 아주 좋습니다. svg를 사용하여 원하는 그래프를 그리는 데 도움이되는 간단한 라이브러리를 제공합니다. 나는 당신이 찾고있는 특정 부분을 도서관이라고 생각합니다. 이것은 API 호출입니다.

• https://github.com/mbostock/d3/wiki/SVG-Shapes#area

사용 d3js

• http://bl.ocks.org/mbostock/3894205
• http://bl.ocks.org/mbostock/3883195
• http://mbostock.github.io/d3/talk/20111018/area-gradient.html
• http://bl.ocks.org/NPashaP/113f7fea0751fa1513e1에 대한 예제와 코드 아래 일부 링크 에 StackOverflow에
• http://bl.ocks.org/mbostock/1667367