SVG 경로를 따라 그라디언트를 적용 할 수 있습니까?

SVG 경로를 따라 그라디언트를 적용 할 수 있습니까?

---

스크립트에 의해 트리거되는 내 웹 사이트에 간단한 로딩 표시기를 추가하고 싶습니다. 사용자가 기다리는 동안 그라디언트가 있고 회전하는 단순한 원호 여야합니다. 나는 애니메이션 부분을 시도하지 않았지만 지금은 정적 스타일링에 갇혀 있습니다. 지금까지 얻은 내용은 다음과 같습니다.

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
        width="100" height="100">
        <defs>
            <linearGradient id="grad1">
                <stop offset="0%" stop-color="red"/>
                <stop offset="100%" stop-color="red" stop-opacity="0" />
            </linearGradient>
        </defs>
        <path d="M50 10  A40 40 0 1 0 90 50"
            stroke="url(#grad1)" stroke-width="10" fill="transparent"/>
    </svg>

위쪽 가장자리에서 오른쪽 가장자리 (270 °)로 위쪽 가장자리에서 호를 그리지 만 그래디언트가 잘못되었습니다. 시작 (위쪽 가장자리, 0 °)이 불투명하고 끝 (오른쪽 가장자리, 270 °)이 투명하도록 경로를 따르는 대신 호 선의 결과 이미지가 화면 공간에서 왼쪽에서 오른쪽으로 색상이 지정됩니다.

그래디언트가 내 호 경로를 따르도록하려면 어떻게해야합니까?

---

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

기본적으로이 기술은 getPointAtLength스트로크를 여러 개의 짧은 스트로크로 분할하고 각각에 대해 보간 된 색상 중지를 지정한 다음 해당 중지 사이의 짧은 스트로크마다 그라디언트를 적용하는 데 사용됩니다.

도전에 응한다면 행운을 빕니다;)

편집 (2019 년 7 월 3 일) :

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

---

이러한 유형의 그라디언트는 SVG에서 달성하기 쉽지 않습니다 . SVG 각도 그라디언트를 참조하십시오 .

또한 transparent은 SVG에서 유효한 색상이 아닙니다. stop-opacity이 예와 같이 명시해야합니다 . http://jsfiddle.net/WF2CS/

가장 쉬운 해결책은 다양한 불투명도를 가진 일련의 작은 호 경로 일 수 있습니다.

---

나도이 문제가 있었기 때문에 .NET Framework를 따르는 그래디언트 생성 을 지원하는 라이브러리를 만들었습니다path . 원하는 경우 Javascript 또는 D3.js와 함께 독립형으로 사용할 수 있습니다. 라이브러리는 첫 번째 답변에서 참조한 Mike Bostock의 작업을 100 % 기반으로하지만 필수 종속성으로 D3를 제거했습니다.

또한 배경과 사용법을 설명하는 Medium에 대한 간단한 자습서를 작성했습니다. .

---

또 다른 방법은 두 개의 반원을 만들고 각각의 스트로크에 반대 선형 그래디언트를 적용하고 둘 다 ag 요소에 포함되어 있는지 확인하는 것입니다. (제 예에서 결합 된 그래디언트는 270 도가 아니라 360 도입니다. 두 개의 반원이 수직으로 쌓여 있습니다. 첫 번째 그래디언트 (상단 반원의 획에 적용됨)는 100-50 % 불투명도가되고 다음 그래디언트는 0이됩니다. % ~ 50 %. 두 그래디언트 모두 단위 벡터가 x1, y1, y2 = 0 및 x2 = 1로 설정되어 왼쪽에서 오른쪽으로 실행됩니다.) 그런 다음 transform = rotate (deg, ctrX, ctrY)를 g에 적용합니다.

---

path{
 fill : url(#gradient)
}

<svg width="660" height="220">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#05a"/>
      <stop offset="100%" stop-color="#0a5"/>
    </linearGradient>
  </defs>
 <path d="M150 0 L75 200 L225 200 Z" />
</svg>

참조 URL : https://stackoverflow.com/questions/14633363/can-i-apply-a-gradient-along-an-svg-path