SVG 경로에 그라디언트를 추가할 수 있습니까?

Question

스크립트에 의해 실행되는 간단한 로딩 표시기를 내 웹사이트에 추가하고 싶습니다. 사용자가 기다리는 동안 그라데이션과 회전이 포함된 간단한 호여야 합니다. 아직 애니메이션 부분을 시도하지 않았지만 지금은 정적 스타일이 붙어 있습니다. 지금까지 얻은 정보는 다음과 같습니다.

으아악

상단 가장자리에서 오른쪽 가장자리(270°)까지 시계 반대 방향으로 호를 그리는데 그라데이션이 잘못되었습니다. 호 획의 최종 이미지는 시작점(상단 가장자리, 0°)이 불투명하고 끝점(오른쪽 가장자리, 270°)이 투명해지는 경로를 따르지 않고 화면 공간에서 왼쪽에서 오른쪽으로 색상이 지정됩니다.

그라디언트가 호 경로를 따르도록 하려면 어떻게 해야 하나요?

Answer 1

Mike Bostock은 쉽지는 않지만 방법을 찾았습니다. https://bl.ocks.org/mbostock/4163057

기본적으로 이 기술은 다음을 사용합니다. getPointAtLength 획을 여러 개의 짧은 획으로 분할하려면 각 획에 대해 보간 색상 중지점을 지정한 다음 해당 중지점 사이의 각 짧은 획에 그라데이션을 적용합니다.

도전에 성공했다면 행운을 빕니다;)

수정됨(2019년 7월 3일):

이제 원하는 작업을 정확하게 수행하는 데 도움이 되는 라이브러리가 있습니다. D3를 반드시 사용할 필요는 없지만 원할 경우 사용할 수 있습니다. Medium에 대한 튜토리얼입니다.

Answer 2

CSS 이미지 모듈 - 레벨 4에서는 원추형 그라데이션을 소개합니다. MDN에 따르면 IE를 제외한 모든 주요 브라우저에서 지원됩니다.

기술적으로 경로를 따른 그라데이션은 아니지만 경로가 원형이므로 다음을 통해 원하는 결과를 얻을 수 있습니다.

으아악 으아악