主題

SVG 自學(xué)微筆記(08) - 線性&放射漸層

冰抹茶拿鐵 | 2023-05-10 18:00:14 | 巴幣 0 | 人氣 256

不定更新、即將迎來(lái)結(jié)尾 (?′?`?)

學(xué)習(xí)資源: W3Schools、其他網(wǎng)路資料

漸層(Gradients)是W3Schools關(guān)於SVG基礎(chǔ)教學(xué)的最後部分，漸層的效果就是讓顏色漸漸地轉(zhuǎn)變成另一種顏色，而在SVG中的漸層又有兩種主要的類型，分別是線性(Linear)漸層和放射(Radial)漸層。

SVG : 漸層

範(fàn)例1 - 水平線性漸層

(左邊x2是100%，右邊x2是50%)
要達(dá)到水平漸層的效果，漸層的y1、y2位置必須相同，但是x1、x2位置必須不同，下面的漸層從左上最前端開(kāi)始到右上最末端結(jié)束，當(dāng)x2被修改成50%則代表漸層在中間就結(jié)束，後面都會(huì)是粉紅色，而不再有漸層效果。

<svg height="300" width="400">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color: wheat;stop-opacity:1;"></stop>
            <stop offset="100%" style="stop-color: pink;stop-opacity:1;"></stop>
        </linearGradient>
    </defs>
    <ellipse cx="160" cy="100" rx="150" ry="80" fill="url(#grad1)"></ellipse>
</svg>

(ellipse的fill屬性可以透過(guò)url指定套用的顏色漸層效果)

範(fàn)例2 - 垂直線性漸層

(左邊y2是100%，右邊y2是50%)

要達(dá)到垂直漸層的效果，漸層的x1、x2位置必須相同，但是y1、y2位置必須不同，下面的漸層從左上最前端開(kāi)始到左下最末端結(jié)束，當(dāng)y2被修改成50%則代表漸層在中間就結(jié)束，後面都會(huì)是粉紅色，而不再有漸層效果。

<svg height="300" width="400">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color: wheat;stop-opacity:1;"></stop>
            <stop offset="100%" style="stop-color: pink;stop-opacity:1;"></stop>
        </linearGradient>
    </defs>
    <ellipse cx="160" cy="100" rx="150" ry="80" fill="url(#grad1)"></ellipse>
</svg>

範(fàn)例3 - 傾斜線性漸層

要達(dá)到傾斜漸層的效果，漸層的x1、x2位置必須不同，而且y1、y2位置也必須不同，下面的漸層從左偏下的最前端開(kāi)始到右偏上最末端結(jié)束。

<svg height="300" width="400">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="80%" x2="100%" y2="10%">
            <stop offset="0%" style="stop-color: blue;stop-opacity:1;"></stop>
            <stop offset="100%" style="stop-color: red;stop-opacity:1;"></stop>
        </linearGradient>
    </defs>
    <ellipse cx="160" cy="100" rx="150" ry="80" fill="url(#grad1)"></ellipse>
    <text x="115" y="115" font-size="45" fill="white">SVG</text>
</svg>

範(fàn)例4 - 放射性漸層

由放射核心向外發(fā)散產(chǎn)生放射性漸層效果，簡(jiǎn)單說(shuō)就是圓形漸層。

<svg height="300" width="400">
    <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" fx="50%" fy="50%" r="50%">
            <stop offset="0%" style="stop-color: blue;stop-opacity:1;"></stop>
            <stop offset="100%" style="stop-color: red;stop-opacity:1;"></stop>
        </radialGradient>
    </defs>
    <ellipse cx="160" cy="100" rx="150" ry="80" fill="url(#grad1)"></ellipse>
</svg>

(fx、fy設(shè)定成50%的效果跟沒(méi)有fx、fy的時(shí)候一模一樣)

透過(guò)調(diào)整fx、fy可以看到藍(lán)色核心區(qū)域向右下方移動(dòng)的效果。

<svg height="300" width="400">
    <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" fx="70%" fy="90%" r="50%">
            <stop offset="0%" style="stop-color: blue;stop-opacity:1;"></stop>
            <stop offset="100%" style="stop-color: red;stop-opacity:1;"></stop>
        </radialGradient>
    </defs>
    <ellipse cx="160" cy="100" rx="150" ry="80" fill="url(#grad1)"></ellipse>
</svg>