SVG 사각형 및 경로 그라데이션

Question

나는 튜브 전구 빛의 효과를 제공하기 위해 다음과 같이 RadialGradient는을 사용

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="100%" height="100%" 
    viewBox="0 0 100 100"> 

    <radialGradient id="radial" cx="50" cy="50" r="50" 
     gradientUnits="userSpaceOnUse"> 
     <stop offset="0.8" style="stop-color:#00FFFF"/> 
     <stop offset="1" style="stop-color:#004444"/> 
    </radialGradient> 

    <circle cx="50" cy="50" r="50" 
      fill="url(#radial)"/> 
</svg> 

을하지만 사각형 및 경로 그라데이션 또는 사용자 정의 모양의 그라데이션에 대한 동일한 어떻게해야합니까 직사각형이나 별 같은 다른 모양?
Microsoft PowerPoint에서 Rectangular gradient 및 Path Gradient라고하는이 옵션이 있습니다.
위의 효과와 마찬가지로 각 가장자리 선에 대해 중심에서 shud가 시작되고 첫 번째 정지 점 0.8에서 두 번째 정지합니다.

Illustrator에서 이러한 그래디언트를 사용할 수 있습니까?

Answer 1

할 수 있습니다 여러 하위 형태로 모양을 분할하여 그것을 가짜.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    width="100%" height="100%" 
 
    viewBox="0 0 100 100"> 
 

 
    <linearGradient id="horiz" x1="0.5" spreadMethod="reflect"> 
 
     <stop offset="0.8" style="stop-color:#00FFFF"/> 
 
     <stop offset="1" style="stop-color:#004444"/> 
 
    </linearGradient> 
 

 
    <linearGradient id="vert" y1="0.5" x2="0" y2="1" spreadMethod="reflect"> 
 
     <stop offset="0.8" style="stop-color:#00FFFF"/> 
 
     <stop offset="1" style="stop-color:#004444"/> 
 
    </linearGradient> 
 

 
    <polygon points="0,0, 100,100, 100,0, 0,100" fill="url(#horiz)"/> 
 
    <polygon points="0,0, 100,0, 0,100, 100,100" fill="url(#vert)"/> 
 
</svg>

이 작동하는 방식은 우리가 두 개의 모래 시계 모양의 다각형을 가지고, 우리는 각각 선형 그라디언트를 적용 할 것입니다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    width="100%" height="100%" 
 
    viewBox="0 0 100 100"> 
 

 
    <polygon points="0,0, 100,100, 100,0, 0,100" fill="gold"/> 
 
    <polygon points="0,0, 100,0, 0,100, 100,100" fill="green"/> 
 
</svg>