# 漸層

## 線形漸層

Linear gradients change along a straight line. To insert one, you create a `<linearGradient>` node inside the definitions section of your SVG file.

### 基本範例

html
``````<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<stop class="stop1" offset="0%" />
<stop class="stop2" offset="50%" />
<stop class="stop3" offset="100%" />
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="black" stop-opacity="0" />
<stop offset="100%" stop-color="blue" />
<style>
<![CDATA[
.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"
</svg>
``````

svg
``````<stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
``````

`<linearGradient>`元素還可以設置其他一些屬性，用來定義尺寸和样 式。比如漸變的方向是由兩個點控制的，它們用`x1``x2``y1``y2`四個屬性控制，形成一條直線，漸變就沿這條直線變化。漸變默認的方向是水平方向，使用這些屬性就可以改變方向。上面例子裡的 Gradient2 就是一個垂直的漸變。

xml
`````` <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
``````

xml
`````` <linearGradient id="Gradient1">
<stop id="stop1" offset="0%"/>
<stop id="stop2" offset="50%"/>
<stop id="stop3" offset="100%"/>
``````

## 放射形漸層

### 基本範例

html
``````<?xml version="1.0" standalone="no"?>
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</defs>

<rect
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"
</svg>
``````

### 中心和焦點

html
``````<?xml version="1.0" standalone="no"?>

<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</defs>

<rect
x="10"
y="10"
rx="15"
ry="15"
width="100"
height="100"
stroke="black"
stroke-width="2" />

<circle
cx="60"
cy="60"
r="50"
fill="transparent"
stroke="white"
stroke-width="2" />
<circle cx="35" cy="35" r="2" fill="white" stroke="white" />
<circle cx="60" cy="60" r="2" fill="white" stroke="white" />
<text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
(fx,fy)
</text>
<text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
(cx,cy)
</text>
</svg>
``````

html
``````<?xml version="1.0" standalone="no"?>

<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
cx="0.5"
cy="0.5"
r="0.4"
fx="0.75"
fy="0.75"
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
cx="0.5"
cy="0.5"
r="0.4"
fx="0.75"
fy="0.75"
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
cx="0.5"
cy="0.5"
r="0.4"
fx="0.75"
fy="0.75"
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</defs>

<rect
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"
<rect
x="120"
y="120"
rx="15"
ry="15"
width="100"
height="100"

<text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">
</text>
<text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">
Repeat
</text>
<text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">
Reflect
</text>
</svg>
``````

html
``````<radialGradient