svg-渐变

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"/>

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>