SVG <linearGradient> 線性漸變

admin發表於2018-11-04
SVG

線性漸變是沿著一條軸線，實現顏色值的過渡效果。

軸線可以是水平、垂直或者傾斜，下面通過程式碼例項介紹具體細節。

與線性漸變類似的還有徑向漸變，具體參閱SVG <radialGradient> 徑向漸變一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:400px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/000857y5gilpwgwg6di5pn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼實現了由紅色到藍色的線性漸變效果。

漸變是通過<linearGradient>內部若干元素極其元素屬性的恰當設定實現的。

下面結合程式碼例項分別做一下詳細介紹。

一.<stop>元素：

此元素可以對整個漸變進行分段，程式碼片段如下：

[XML] 純文字檢視 複製程式碼
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />

程式碼規定漸變從引用元素漸變區域0%處開始，100%處結束，且由紅色漸變到藍色。

offset屬性：

此屬性規定，漸變在引用元素漸變區域偏移量，也就是從何處開始漸變。屬性值既可以是百分比也可以是小數。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:400px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear">
        <stop offset="10%" stop-color="red" />
        <stop offset="50%" stop-color="green" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/000955etyhhypzy6ty3syj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.通過<stop>元素將漸變分為兩段，從紅色到綠色，再由綠色到藍色。

（2）.紅色漸變是從10%處開始的，0-10%這段空間使用紅色填充。

（3）.在offset規定的值處，顏色是stop-color規定的顏色值。

stop-color屬性：

此屬性用於規定漸變的顏色，在上面已經介紹，不再多言。

二.<linearGradient>元素的屬性:

（1）.id屬性：

此屬性是必須的，否則無法使用此漸變。

程式碼片段如下：

[XML] 純文字檢視 複製程式碼
<rect x="10" y="10" width="400" height="100" fill="url(#linear)" />

<rect>矩形元素使用漸變就是利用id屬性值實現的。

（2）.gradientUnits屬性：

gradientUnits具有兩個屬性值，分別如下：

（1）.objectBoundingBox，預設值。

（2）.userSpaceOnUse。

首先看一段程式碼例項，然後進行分析：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:400px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
        gradientUnits="objectBoundingBox"
        x1="0" y1="0"
        x2="1" y2="0">
        <stop offset="0" stop-color="red" />
        <stop offset="1" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

gradientUnits屬性詳細闡述：

（1）.當屬性值為objectBoundingBox時，表示將以應用漸變的元素形成的座標系統為參考，x1、y1、x2與y2屬性值都是0-1之間的數字，當然也可以是百分比數字（0-100%），那麼漸變的尺寸是一個相對值，隨元素尺寸變化而發生改變。

（2）.當屬性值為userSpaceOnUse時，以當前使用者座標系統為參考，x1、y1、x2與y2都是絕對值。

x1、y1、x2與y2屬性：

在前文已經對四個屬性有所涉及，（x1、y1）與（x2、y2）形成兩個點。

兩個點可以連線成一條軸線，能夠確定元素的漸變區域與漸變方向。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
width:400px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
        gradientUnits="objectBoundingBox"
        x1="0" y1="0"
        x2="1" y2="1">
        <stop offset="0" stop-color="red" />
        <stop offset="1" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/001134mhaohb11t1ha7zrz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的程式碼規定了一個從左上角到右下角傾斜的漸變。

三.spreadMethod屬性：

此屬性用於規定處理漸變區域之外的區域的方式。

具有三個屬性值：

（1）.pad(預設值)。

（2）.reflect。

（3）.repeat。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:400px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
        x1="0.3" y1="0"
        x2="0.7" y2="0"
        spreadMethod="pad">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/001210u2uozsbz6u2pr2kd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.規定引用元素的漸變區域是0.3-0.7之間，也就是30%-70%之間的區域。

（2）.在此漸變區域，實現由紅色到藍色的漸變效果。

（3）.<stop>元素規定漸變從元素漸變區域0%處開始至100%處結束。

（4）.spreadMethod屬性值pad表示漸變區域之外的區域使用對應的stop-color規定的顏色填充，於是漸變區域的左側使用紅色填充，漸變區域的右側使用藍色填充。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:400px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
        x1="0.3" y1="0"
        x2="0.7" y2="0"
        spreadMethod="reflect">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/001257o6f1kywyfynpy36i.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

當spreadMethod屬性值為reflect，表示漸變區域之外的區域會進行漸變。

不過漸變是反向的，按照從最後一個顏色到第一個顏色順序進行漸變。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:400px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
        x1="0.3" y1="0"
        x2="0.7" y2="0"
        spreadMethod="repeat">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/001330a6mijf4czj3b43i2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

當spreadMethod屬性值為repeat，漸變區域之外的區域同樣會進行漸變，不過沒有反序。

四.gradientTransform屬性：

此屬性實現rotate和translate等變換，具體參閱SVG transform用法一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:400px;
  height:200px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient id="linear"
        x1="0.3" y1="0"
        x2="0.7" y2="0"
        gradientTransform="rotate(90)">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="400" height="100" fill="url(#linear)" />
  </svg>                           
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/001418a7zeye199yerz7jm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

將漸變旋轉了90度角。

相關文章