7. svg學習筆記-圖案和漸變

時間  2019-12-04
標籤 svg 學習 筆記 圖案 漸變 简体版
原文   原文鏈接

以前，咱們僅僅使用純色來爲圖形填充顏色和繪製輪廓，除此以外，咱們還可使用圖案和漸變來填充圖形或者是繪製輪廓。html

圖案

圖案的效果相似於，在網頁中給一個元素指定背景圖像，當背景圖像的尺寸小於元素的尺寸的時候，背景圖片會默認重複以填充整個元素。效果以下：svg

clip_image001

要建立一個圖案，首先就須要定義一個重複用的圖形對象，這個圖形對象被稱做tile（瓷磚），tile能夠是任意的svg圖形元素，包括<image>引用的外部圖片文件，而後將tile放在<pattern>元素中做爲子元素，建議將<pattern>元素放在<defs>元素中，雖然將<pattern>元素直接放在<svg>中也能夠，但<pattern>元素原本就不會再畫布上顯示，將其放置在<defs>元素中更加規範。url

<pattern>元素的屬性有id，x，y，width，height，patternUnits。id是必須的屬性，id惟一的標識圖案，用來在其餘圖案中引用。x和y指定圖案左上角的x和y座標，width和height的值爲數值或是百分數或是0到1之間的小數，用於指定tile佔據容器的寬度和高度，patternUnits指定填充的方式，取值爲objectBoundingBox和userSpaceOnUse，當取值爲objectBoundingBox時，width和height值必須爲百分數或0到1之間小數，此時無論被填充容器的大小，水平重複tile的次數爲1/width，豎直重複tile的次數爲1/height；當取值爲useSpaceOnUse時，width和height的值必須爲數值，意爲tile的寬和高，水平和豎直重複的tile的次數和父容器的寬高有關，示例：spa

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg widht="300" height="300" style="border:1px solid #000">
        <defs>
            <pattern id="basic" x="0" y="0" width="8%" height="8%" patternUnits="objectBoundingBox">
                <ellipse cx="20" cy="15" rx="10" ry="7.5" stroke="blue"></ellipse>
            </pattern>
        </defs>
        <rect x="0" y="0" width="300" height="300" stroke="black" fill="url(#basic)"></rect>
    </svg>

    <svg widht="300" height="300" style="border:1px solid #000">
        <defs>    
            <pattern id="basic" x="0" y="0" width="20%" height="20%" patternUnits="objectBoundingBox">
                <ellipse cx="20" cy="15" rx="10" ry="7.5" stroke="blue"></ellipse>
            </pattern>
        </defs>
        <rect x="0" y="0" width="300" height="300" stroke="black" fill="url(#basic)"></rect>
    </svg>
</body>
</html>

效果以下：code

clip_image003

以上代碼中我是用一個<ellipse>元素做爲<pattern>元素的tile，在第一個svg中，我將<pattern>元素的patternUnits屬性設置爲objectBoundingBox，並將width和height設置爲8%，因此在左邊的圖像中水平和豎直tile都重複了12.5次，但因爲被填充容器的寬度不夠，因此每一個tile都只顯示了一部分，而在第二個svg中，<pattern>元素的patternUnits屬性依然設置爲objectBoundingBox，但我將width和height設置爲20%，容易看出，右邊的圖中有足夠的空間填充tile，可是水平只填充了5個，豎直也填充了5個，這就是設置patternUnits爲objectBoundingBox的填充特色。htm

示例：對象

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg widht="300" height="300" style="border:1px solid #000">
        <defs>
            <pattern id="basic" x="0" y="0" width="30" height="25" patternUnits="userSpaceOnUse">
                <ellipse cx="20" cy="15" rx="10" ry="7.5" stroke="blue"></ellipse>
            </pattern>
        </defs>
        <rect x="0" y="0" width="300" height="300" stroke="black" fill="url(#basic)"></rect>
    </svg>

    <svg widht="300" height="300" style="border:1px solid #000">
        <defs>    
            <pattern id="basic" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                <ellipse cx="20" cy="15" rx="10" ry="7.5" stroke="blue"></ellipse>
            </pattern>
        </defs>
        <rect x="0" y="0" width="300" height="300" stroke="black" fill="url(#basic)"></rect>
    </svg>
</body>
</html>

效果：blog

clip_image005

以上代碼中我將兩個svg中<pattern>元素中的patternUnits屬性都設置爲userSpaceOnUse，圖片

但第一個的width和height均比第二個大，svg水平顯示的tile個數是被填充容器的寬度除以<pattern>的寬度得出來的，豎直方向上相似，第二個svg中<pattern>元素的寬度不足以顯示整個tile，因此顯示爲半個。當patternUnits設置爲userSpaceOnUse時，tile重複的次數與被填充容器的寬度和<pattern>的寬度有關。ip

<pattern>元素還有個patternContentUnits屬性

圖案還能夠嵌套圖案，例如在一個圖案中使用的tile引用了另外一個圖案做爲填充，當填充元素引用這個圖案時就會顯示出嵌套圖案。

漸變

漸變有兩種，線性漸變和徑向漸變，svg中，線性漸變用linearGradient表示，徑向漸變以radialGradient表示。

和在ps中建立漸變色同樣，線性漸變中必須指定漸變點，漸變點中間的部分由計算機自動計算添加顏色，經過向<linearGradient>元素中添加子元素<stop>元素來添加漸變點，經過<stop>的offset屬性指定漸變點相對於父容器的位置，設置stop-color屬性指定漸變點的顏色，stop-opacity屬性指定漸變點顏色的透明度。線性漸變默認的方向是從左到右，經過爲linearGradient設置漸變的起點和終點座標能夠改變漸變的方向，起點的座標屬性名爲x1和y1，終點的座標屬性名爲x2和y2，值必須是從0%到100%的百分數或者是從0到1的小數。示例以下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <defs>
            <linearGradient id="g1">
                <stop offset="0%" stop-color="#4bf0df" stop-opacity="1"/>
                <stop offset="33.3%" stop-color="#f0ea4b" stop-opacity="0.7"/>
                <stop offset="100%" stop-color="#f0724b" stop-opacity="0"/>
            </linearGradient>
            <linearGradient id="g2" x1="100%" y1="0%" x2="0%" y2="0%">
                <stop offset="0%" stop-color="#4bf0df" stop-opacity="1"/>
                <stop offset="33.3%" stop-color="#f0ea4b" stop-opacity="0.7"/>
                <stop offset="100%" stop-color="#f0724b" stop-opacity="0"/>
            </linearGradient>
            <linearGradient id="g3" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#4bf0df" stop-opacity="1"/>
                <stop offset="33.3%" stop-color="#f0ea4b" stop-opacity="0.7"/>
                <stop offset="100%" stop-color="#f0724b" stop-opacity="0"/>
            </linearGradient>
            <linearGradient id="g4" x1="0%" y1="100%" x2="0%" y2="0%">
                <stop offset="0%" stop-color="#4bf0df" stop-opacity="1"/>
                <stop offset="33.3%" stop-color="#f0ea4b" stop-opacity="0.7"/>
                <stop offset="100%" stop-color="#f0724b" stop-opacity="0"/>
            </linearGradient>
            <linearGradient id="g5" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#4bf0df" stop-opacity="1"/>
                <stop offset="33.3%" stop-color="#f0ea4b" stop-opacity="0.7"/>
                <stop offset="100%" stop-color="#f0724b" stop-opacity="0"/>
            </linearGradient>
            <linearGradient id="g6" x1="100%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#4bf0df" stop-opacity="1"/>
                <stop offset="33.3%" stop-color="#f0ea4b" stop-opacity="0.7"/>
                <stop offset="100%" stop-color="#f0724b" stop-opacity="0"/>
            </linearGradient>
        </defs>
        <rect x="0" y="0" width="200" height="50" stroke="black" fill="url(#g1)"></rect>
        <rect x="0" y="50" width="200" height="50" stroke="black" fill="url(#g2)"></rect>
        <rect x="0" y="100" width="200" height="50" stroke="black" fill="url(#g3)"></rect>
        <rect x="0" y="150" width="200" height="50" stroke="black" fill="url(#g4)"></rect>
        <rect x="0" y="200" width="200" height="50" stroke="black" fill="url(#g5)"></rect>
        <rect x="0" y="250" width="200" height="50" stroke="black" fill="url(#g6)"></rect>
    </svg>
</body>
</html>

效果以下：

clip_image006

以上的漸變方向依次是從左到右，從右到左，從上到下，從下到上，從左上角到右下角，從右上角到左下角，漸變的方向其實就是<linearGradient>元素的x1，y1和x2，y2兩點之間的直線方向。

咱們上面建立的漸變都是從0%到100%的，若是是從10%到90%會出現什麼狀況：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <defs>
            <linearGradient id="g1">
                <stop offset="10%" stop-color="#f666cc"></stop>
                <stop offset="90%" stop-color="#e366f6"></stop>
            </linearGradient>
            <linearGradient id="g2">
                <stop offset="10%" stop-color="red"></stop>
                <stop offset="90%" stop-color="green"></stop>
            </linearGradient>
            <linearGradient id="g3">
                <stop offset="30%" stop-color="red"></stop>
                <stop offset="60%" stop-color="green"></stop>
            </linearGradient>
        </defs>
        <rect x="0" y="0" width="200" height="100" fill="url(#g1)"></rect>
        <rect x="50" y="100" width="200" height="100" fill="url(#g2)"></rect>
        <rect x="100" y="200" width="200" height="100" fill="url(#g3)"></rect>
    </svg>
</body>
</html>

效果以下：

clip_image007

首先，講一下上述的代碼，第一個漸變的位置爲從10%到90%，第二個也是從10%到90%，第三個是30%到60%，若是第一個圖像不太明顯，那麼看第二個兩個反色，若是實在看不出來看第三個總能明白了吧，svg中不在漸變範圍的顏色默認以最靠近的漸變點的顏色填充。

也就是說在第三個圖像中，從0%到30%以紅色填充，30%到60%爲紅色到綠色的漸變，60%到100%爲綠色填充。在線性漸變<linearGradient>元素中有個spreadMethod屬性，它專門管這個狀況，有三個值，分別是pad（起始和結束漸變點會擴展到對象的邊緣），repeat（漸變會重複起點到終點的過程，直到填充滿整個對象），reflect（漸變會按終點到起點，起點到終點的排列重複，直到填充滿整個對象）。

好，廢話一大堆，終於說完了svg中的線性漸變(⊙﹏⊙)b，線性漸變明白了，徑向漸變就簡單的多了，徑向漸變就是指定一箇中心點，漸變以圓形的方式向外漸變，在svg中以<radialGradient>表示，屬性 cx和cy表示漸變中心的座標，r表示漸變半徑，取值均是是從0%到100%的百分數或者是從0到1的小數，默認值均爲50%。向<radialGradient>中添加漸變點的方式和徑向漸變徹底一致，此處不說了（口乾舌燥┗( T﹏T )┛┗( T﹏T )┛），徑向漸變也有spreadMethod屬性，設置方式和線性漸變一致~致~致~~~~

看示例：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <defs>
            <radialGradient id="g1">
                <stop offset="0%" stop-color="#e366f6"></stop>
                <stop offset="50%" stop-color="#66f6ee"></stop>
                <stop offset="100%" stop-color="#8ff666"></stop>
            </radialGradient>
            <radialGradient id="g2" r="100%">
                <stop offset="0%" stop-color="#e366f6"></stop>
                <stop offset="50%" stop-color="#66f6ee"></stop>
                <stop offset="100%" stop-color="#8ff666"></stop>
            </radialGradient>
            <radialGradient id="g3" cx="0" cy="0" r="100%">
                <stop offset="0%" stop-color="#e366f6"></stop>
                <stop offset="50%" stop-color="#66f6ee"></stop>
                <stop offset="100%" stop-color="#8ff666"></stop>
            </radialGradient>
        </defs>
        <rect x="50" y="0" width="200" height="100" fill="url(#g1)"></rect>
        <rect x="50" y="100" width="200" height="100" fill="url(#g2)"></rect>
        <rect x="50" y="200" width="200" height="100" fill="url(#g3)"></rect>
    </svg>
</body>
</html>

效果：

clip_image008

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程