SVG 學習<三>漸變

目錄

SVG 學習<一>基礎圖形及線段

SVG 學習<二>進階 SVG世界，視野，視窗 stroke屬性 svg分組

SVG 學習<三>漸變

SVG 學習<四> 基礎API

SVG 學習<五> SVG動畫

SVG 學習<六> SVG的transform

SVG 學習<七> SVG的路徑——path(1)直線命令、弧線命令

SVG 學習<八> SVG的路徑——path(2)貝塞爾曲線命令、光滑貝塞爾曲線命令

（轉）利用 SVG 和 CSS3 實現有趣的邊框動畫

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

SVG也能夠作漸變 ， 可分爲linear （線性漸變） 和 radial（放射漸變）兩種。

　　linearGradient 線性漸變

HTML代碼

    <svg>
      <defs>
        <linearGradient id="grad1" x1="100%" y1="0%" x2="0%" y2="0%">
          <stop offset="33%" style="stop-color:rgb(0,0,255); stop-opacity:1" />
          <stop offset="66%" style="stop-color:rgb(255,0,0); stop-opacity:1" />
          <stop offset="99%" style="stop-color:rgb(0,255,0); stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect x="100" y="50" width="280" height="150" fill="url(#grad1)" />
    </svg>

defs用來定義元素，好比 漸變元素 路徑元素 等... ... 

linearGradient 定義漸變元素；

　　id 代表漸變元素id便於svg圖形引用；

　　x1 ~ x2 爲橫向漸變路徑，例： x1 = "0%"  x2 = "100%" 則定義從左往右漸變 反之則從右往左漸變；

　　y1 ~ y2 爲縱向漸變路徑，例： y1 = "0%" y2 = "100%" 則定義從上往下漸變 反之則從下往上漸變；

　　x1 不等於 x2 且 y1 等於 y2 ， 爲水平漸變；

　　y1 不等於 y2 且 x1 等於 x2 ， 爲垂直漸變；

　　y1 y2 x1 x2 皆不相等 ， 角形漸變；

　　stop 定義漸變元素子項；

　　　　offset定義顏色佔比，stop-color定義顏色，stop-opacity定義透明度；

注：offset爲標籤屬性不可在css中使用。

定義矩形，使矩形填充色爲線性漸變元素。

HTML代碼

    <svg width="500" height="500">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="20%" x2="100%" y2="80%">
          <stop offset="0%" style="stop-color:rgb(0,0,255); stop-opacity:1" />
          <stop offset="50%" style="stop-color:rgb(255,0,0); stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(0,255,0); stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect x="100" y="50" width="300" height="300" fill="url(#grad1)" />
    </svg>

　　radialGradient 放射漸變

HTML代碼

    <svg width="500" height="500">
      <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="80%" fy="20%">
          <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:1" />
        </radialGradient>
      </defs>
      <circle cx="250" cy="250" r="200" fill="url(#grad1)" />
    </svg>

radialGradient 定義漸變元素；

　　id 代表漸變元素id便於svg圖形引用；

　　cx  cy 定義外圓圓心位置；

　　r 定義漸變半徑；

　　fx  fy 定義內圓圓心位置；

通常外圓圓心位置 一般爲 50% 則可徹底填充圖形，變化內圓心位置可調整高亮位置。