svg-漸變

1.線性漸變

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="50%"/>
        <stop class="stop3" offset="100%"/>
      </linearGradient>
      <linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      <style type="text/css"><![CDATA[
        #rect1 { fill: url(#Gradient1); }
        .stop1 { stop-color: red; }
        .stop2 { stop-color: black; stop-opacity: 0; }
        .stop3 { stop-color: blue; }
      ]]></style>
  </defs>

  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>

</svg>
           

x1,y1,x2,y2：控制漸變的方向，漸變方向就是經過這兩個點的直線的方向

2.經向漸變

<radialGradient id="jb2" cx="0.5" cy="0.5" r="0.5">
        <stop offset="0%"  style="stop-color:rgb(206, 88, 108); "/>
        <stop offset="50%"  style="stop-color:rgb(80, 181, 206); "/>
        <stop offset="70%"  style="stop-color:rgb(233, 199, 125); "/>
        <stop offset="90%"  style="stop-color:rgb(189, 138, 236); "/>
        <stop offset="100%"  style="stop-color:rgb(152, 252, 190); "/>
  </radialGradient>
  
  <ellipse id="e2" cx="500" cy="200" rx="150" ry="100" fill="url(#jb2)" />
           

相對于左上角的位置，例如cx，cy都是50%，其實就是圖形的中點位置

• fx: 焦點橫坐标
• fy: 焦點縱坐标

如果焦點如之前描述的那樣被移到圓圈的外面，漸變将不能正确呈現，是以該點會被假定在圓圈範圍内。如果沒有給出焦點，将認為該點與中心點的位置一緻。

1. 沒有設定漸變焦點時

2. 設定了漸變焦點時（fx=“0.7” fy=“0.7”）

由cx，cy确定漸變的中心點。，加上r确定漸變的範圍，**如果漸變焦點在這個範圍之外，漸變将不能正确呈現。**例如下面的漸變焦點就不在漸變範圍内：

<radialGradient id="jb2" cx="0.5" cy="0.5" r="0.2" fx="0.8" fy="0.8">
        <stop offset="0%"  style="stop-color:rgb(206, 88, 108); "/>
        <stop offset="50%"  style="stop-color:rgb(80, 181, 206); "/>
        <stop offset="70%"  style="stop-color:rgb(233, 199, 125); "/>
        <stop offset="90%"  style="stop-color:rgb(189, 138, 236); "/>
        <stop offset="100%"  style="stop-color:rgb(152, 252, 190); "/>
</radialGradient>
           

3.漸變中包含另一個漸變

<linearGradient id="Gradient1">
   <stop id="stop1" offset="0%"/>
   <stop id="stop2" offset="50%"/>
   <stop id="stop3" offset="100%"/>
 </linearGradient>
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1" target="_blank" rel="external nofollow" />
           

4.漸變方式

• Pad就是目前我們見到的效果，即當漸變到達終點時，最終的偏移顔色被用于填充對象剩下的空間。->
• reflect會讓漸變一直持續下去，不過它的效果是與漸變本身是相反的，以100%偏移位置的顔色開始，逐漸偏移到0%位置的顔色，然後再回到100%偏移位置的顔色。–> <-- --> <-- …
• repeat也會讓漸變繼續，但是它不會像reflect那樣反向漸變，而是跳回到最初的顔色然後繼續漸變。–> --> --> …

<svg width="700" height="700" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <!-- 經向漸變 -->
      <radialGradient id="jb1" cx="0.5" cy="0.5" r="0.2" spreadMethod="reflect">
        <stop offset="0%"  style="stop-color:rgb(206, 88, 108); "/>
        <stop offset="50%"  style="stop-color:rgb(80, 181, 206); "/>
        <stop offset="70%"  style="stop-color:rgb(233, 199, 125); "/>
        <stop offset="90%"  style="stop-color:rgb(189, 138, 236); "/>
        <stop offset="100%"  style="stop-color:rgb(152, 252, 190); "/>
      </radialGradient>
      <!-- 經向漸變 -->
      <radialGradient id="jb2" cx="0.5" cy="0.5" r="0.2" spreadMethod="repeat">
        <stop offset="0%"  style="stop-color:rgb(206, 88, 108); "/>
        <stop offset="50%"  style="stop-color:rgb(80, 181, 206); "/>
        <stop offset="70%"  style="stop-color:rgb(233, 199, 125); "/>
        <stop offset="90%"  style="stop-color:rgb(189, 138, 236); "/>
        <stop offset="100%"  style="stop-color:rgb(152, 252, 190); "/>
      </radialGradient>
  </defs>
  <ellipse id="e1" cx="200" cy="200" rx="150" ry="100" fill="url(#jb1)" />
  <ellipse id="e2" cx="500" cy="200" rx="150" ry="100" fill="url(#jb2)" />
</svg>
           

5. 漸變範圍轉為絕對（gradientUnits）

//    objectBoundingBox為預設取值
 <radialGradient id="jb1" cx="0.5" cy="0.5" r="0.2" gradientUnits="objectBoundingBox">  
 <radialGradient id="jb2" cx="500" cy="200" r="50" gradientUnits="userSpaceOnUse">
           

<svg width="700" height="700" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <!-- 經向漸變 -->
      <radialGradient id="jb1" cx="0.5" cy="0.5" r="0.2" gradientUnits="objectBoundingBox">
        <stop offset="0%"  style="stop-color:rgb(206, 88, 108); "/>
        <stop offset="50%"  style="stop-color:rgb(80, 181, 206); "/>
        <stop offset="70%"  style="stop-color:rgb(233, 199, 125); "/>
        <stop offset="90%"  style="stop-color:rgb(189, 138, 236); "/>
        <stop offset="100%"  style="stop-color:rgb(152, 252, 190); "/>
      </radialGradient>
      <!-- 經向漸變 -->
      <radialGradient id="jb2" cx="500" cy="200" r="50" fx="530" fy="235" gradientUnits="userSpaceOnUse">
        <stop offset="0%"  style="stop-color:rgb(206, 88, 108); "/>
        <stop offset="50%"  style="stop-color:rgb(80, 181, 206); "/>
        <stop offset="70%"  style="stop-color:rgb(233, 199, 125); "/>
        <stop offset="90%"  style="stop-color:rgb(189, 138, 236); "/>
        <stop offset="100%"  style="stop-color:rgb(152, 252, 190); "/>
      </radialGradient>
  </defs>
  <ellipse id="e1" cx="200" cy="200" rx="150" ry="100" fill="url(#jb1)" />
  <ellipse id="e2" cx="500" cy="200" rx="150" ry="100" fill="url(#jb2)" />
</svg>