文章出處

前面的話

　　給SVG元素應用填充和描邊，除了使用純色外，還可以使用漸變。本文將詳細介紹SVG漸變

 

線性漸變

　　有兩種類型的漸變：線性漸變和徑向漸變。必須給漸變內容指定一個id屬性，否則文檔內的其他元素不能引用它。為了讓漸變能被重復使用，漸變內容需要定義在<defs>標簽內部，而不是定義在形狀上面

　　線性漸變沿著直線改變顏色，要插入一個線性漸變，需要在SVG文件的defs元素內部，創建一個<linearGradient> 節點

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1">
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="100%" stop-color="#0a5"/>
      </linearGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

　　結果如下所示，默認情況下實現的是水平方向的漸變

　　<stop>元素一共有3個屬性，包括offset，stop-color，stop-opacity

offset用來設置色標位置
stop-color用來設置色標顏色
stop-opacity用來設置色標的透明度

　　下面是一個例子

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1">
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
        <stop offset="100%" stop-color="#0a5"/>
      </linearGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

【x1、x2、y1、y2】

　　線性漸變包括x1、x2、y1、y2這四個屬性，用來控制漸變的大小和方向。取值為0-100%，或者0-1的小數。默認地，x1=y1=y2=0、x2=1

　　如果變成垂直方向的漸變，則需要設置為x1=x2=y1=0、y2=1

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1" x1=0 x2=0 y1=0 y2=1>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="100%" stop-color="#0a5"/>
      </linearGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

　　如果將y2或x2設置為50%，則50%-100%這一部分區域填充為最后一個色標的純色

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1" x1=0 x2=50% y1=0 y2=50%>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="100%" stop-color="#0a5"/>
      </linearGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

　　當然了，可以有多個色標

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1" x1=0 x2=1 y1=0 y2=1>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="20%" stop-color="#50a"/>
        <stop offset="40%" stop-color="#5a0"/>
        <stop offset="60%" stop-color="#a05"/>
        <stop offset="80%" stop-color="#a50"/>
        <stop offset="100%" stop-color="#0a5"/>
      </linearGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

　　漸變除了可以作為填充，也可以作為描邊

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1" x1=0 x2=1 y1=0 y2=1>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="20%" stop-color="#50a"/>
        <stop offset="40%" stop-color="#5a0"/>
        <stop offset="60%" stop-color="#a05"/>
        <stop offset="80%" stop-color="#a50"/>
        <stop offset="100%" stop-color="#0a5"/>
      </linearGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="transparent" stroke-width="10" stroke="url(#Gradient1)"/>
</svg>

【xlink:href】

　　xlink:href屬性用于在一個漸變中引用另一個漸變，被引用的漸變的屬性是可繼承的，也可以被重寫

　　下面的例子中，Gradient2引用了Gradient1的漸變，并重寫了漸變的方向

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1" x1=0 x2=1 y1=0 y2=1>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="50%" stop-color="#50a"/>
        <stop offset="100%" stop-color="#0a5"/>
      </linearGradient>
      <linearGradient id="Gradient2" xlink:href="#Gradient1" x1=0 x2=0 y1=0 y2=1>
      </linearGradient>      
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient2)"/>
</svg>

【gradientUnits】

　　gradientUnits有兩個的值，userSpaceOnUse和objectBoundingBox，這用于決定漸變是否隨著引用它的元素進行縮放。也就是說它決定了x1、y1、x2、y2的縮放

　　userSpaceOnUse: x1、y1、x2、y2表示當前用戶坐標系統的坐標。也就是說漸變中的值都是絕對值

　　objectBoundingBox: x1, y1, x2, y2表示應用漸變的元素創建的邊界坐標系統。也就是說漸變隨著應用的元素進行了縮放

　　如果不設置，默認取值是objectBoundingBox

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1" gradientUnits="objectBoundingBox">
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="50%" stop-color="#50a"/>
        <stop offset="100%" stop-color="#0a5"/>
      </linearGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

　　如果設置為userSpaceOnUse，則x1、x2、y1、y2需要設置為用戶坐標系的坐標絕對值

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1" gradientUnits="userSpaceOnUse" x1="10" x2="60" y1="0" y2="0">
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="50%" stop-color="#50a"/>
        <stop offset="100%" stop-color="#0a5"/>
      </linearGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

【spreadMethod】

　　spreadMethod可以接受三個值，pad，reflect，repeat，它定義了漸變如何開始和結束，當cx和cy的值是在0%到100%里面的時候

pad:（默認值）使用開始和結束位置的顏色結點來填充剩余的部分
reflect: 反射漸變圖案，從開始->結束，再從結束->開始，然后開始->結束，往復直到空間都填滿
repeat: 從start-to-end重復漸變圖案，直到空間填滿

 　　pad為默認值

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <linearGradient id="Gradient1" spreadMethod=pad x1=0.4 x2=0.6>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="100%" stop-color="#0a5"/>
      </linearGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

　　下面是reflect的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <linearGradient id="Gradient1" spreadMethod=reflect x1=0.4 x2=0.6>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="100%" stop-color="#0a5"/>
      </linearGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

　　下面是repeat的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <linearGradient id="Gradient1" spreadMethod=repeat x1=0.4 x2=0.6>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="100%" stop-color="#0a5"/>
      </linearGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

 

徑向漸變

　　徑向漸變與線性漸變相似，只是它是從一個點開始發散繪制漸變。創建徑向漸變需要在文檔的defs中添加一個<radialGradient>元素

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <radialGradient id="Gradient1">
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
        <stop offset="100%" stop-color="#0a5"/>
      </radialGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

【cx、cy、r、fx、fy】

　　與線性漸變的x1、y1、x2、y2屬性不同，徑向漸變使用cx、cy、r、fx、fy這五個屬性來設置漸變

r 設置圓的半徑
cx、cy 定義漸變的中心點坐標
fx、fy  定義漸變的焦點坐標

　　如果不設置，r默認0.5，即元素寬度或高度的一半；cx、cy默認為0.5；fx、fy默認為0.5

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <radialGradient id="Gradient1"  r=0.5 cx=0.5 cy=0.5 fx=0.5 fy=0.5>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
        <stop offset="100%" stop-color="#0a5"/>
      </radialGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

　　巧妙地設置焦點坐標，可以實現聚光燈的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <radialGradient id="Gradient1"  r=0.5 cx=0.5 cy=0.5 fx=0.8 fy=0.8>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
        <stop offset="100%" stop-color="#0a5"/>
      </radialGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

【xlink:href】

　　xlink:href屬性用于在一個漸變中引用另一個漸變，被引用的漸變的屬性是可繼承的，也可以被重寫

　　下面的例子中，Gradient2引用了Gradient1的漸變，并重寫了漸變的方向

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <radialGradient id="Gradient1">
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
        <stop offset="100%" stop-color="#0a5"/>
      </radialGradient>
      <radialGradient id="Gradient2" xlink:href="#Gradient1" fx=0.6>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient2)"/>
</svg>

【gradientUnits】

　　gradientUnits有兩個的值，userSpaceOnUse和objectBoundingBox，這用于決定漸變是否隨著引用它的元素進行縮放。也就是說它決定了cx、cy、fx、fy、r的縮放

　　userSpaceOnUse: cx、cy、fx、fy、r表示當前用戶坐標系統的坐標。也就是說漸變中的值都是絕對值

　　objectBoundingBox: cx、cy、fx、fy、r表示應用漸變的元素創建的邊界坐標系統。也就是說漸變隨著應用的元素進行了縮放

　　如果不設置，默認取值是objectBoundingBox

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <radialGradient id="Gradient1" gradientUnits="objectBoundingBox">
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
        <stop offset="100%" stop-color="#0a5"/>
      </radialGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

　　如果設置為userSpaceOnUse，則cx、cy、fx、fy、r需要設置為用戶坐標系的坐標絕對值 

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <radialGradient id="Gradient1" gradientUnits="userSpaceOnUse" cx=35 cy=35 fx=35 fy=35 r=25>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
        <stop offset="100%" stop-color="#0a5"/>
      </radialGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

【spreadMethod】

　　和線性漸變一樣。它可以接受三個值，pad，reflect，repeat，它定義了漸變如何開始和結束，當cx和cy的值是在0%到100%里面的時候

pad:（默認值）使用開始和結束位置的顏色結點來填充剩余的部分
reflect: 反射漸變圖案，從開始->結束，再從結束->開始，然后開始->結束，往復直到空間都填滿
repeat: 從start-to-end重復漸變圖案，直到空間填滿

　　pad為默認值

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <radialGradient id="Gradient1" r=0.2 spreadMethod=pad>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
        <stop offset="100%" stop-color="#0a5"/>
      </radialGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

 　　下面是reflect的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <radialGradient id="Gradient1" r=0.2 spreadMethod=reflect>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
        <stop offset="100%" stop-color="#0a5"/>
      </radialGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

　　下面是repeat的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <radialGradient id="Gradient1" r=0.2 spreadMethod=repeat>
        <stop offset="0%" stop-color="#05a"/>
        <stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
        <stop offset="100%" stop-color="#0a5"/>
      </radialGradient>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄