久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

SVG進階 | SVG過濾器（SVG Filters）

html5教程 html5模板網
SVG過濾器可以為SVG圖形添加一些非常酷的效果，如陰影、模糊和高光等效果。本文將介紹SVG過濾器的輸入和輸出，過濾器的尺寸，高斯模糊濾鏡，偏移濾鏡和顏色矩陣濾鏡的相關知識。
1.jpg

　　SVG過濾器可以為SVG圖形添加一些非常酷的效果，如陰影、模糊和高光等效果。

　　SVG過濾器的例子

　　先來看一個簡單的SVG過濾器的例子，直觀的感受一些它的效果：
  1. <defs>
  2.   <filter id="blurFilter" y="-5" height="40"
  3.       <feGaussianBlur in="SourceGraphic" stdDeviation="3" y="-"/>
  4.   </filter>
  5. </defs>

  7. <ellipse cx="55" cy="60" rx="25" ry="15"
  8.   style="stroke: none; fill: #663399; " />

  10. <ellipse cx="155" cy="60" rx="25" ry="15"
  11.   style="stroke: none; fill: #663399; filter: url(#blurFilter);" />        
復制代碼

　　在這個例子中，對一個SVG橢圓形應用了模糊濾鏡，得到的結果如下：
2.jpg
　　SVG過濾器的輸入和輸出

　　SVG過濾器在應用過濾效果的時候需要一個輸入源。這個輸入源可以是一個圖形，或圖形的alpha通道，或另一個過濾器的輸出值。

　　SVG過濾器可以從輸入源中產生一個輸出圖像。一個過濾器的輸出可以是另一個過濾器的輸入，這樣，過濾器可以被鏈接起來使用。

　　下面是一張SVG過濾器輸入和輸出的說明圖片：
3.jpg
　　SVG過濾器的輸入通常在SVG濾鏡的in屬性中指定，例如：
  1. <feGaussianBlur stdDeviation="3" in="SourceGraphic" />                              
復制代碼

　　如果你需要將一個SVG過濾器的輸出作為另一個過濾器的輸入，需要在輸出元素上添加一個result屬性：
  1. <feGaussianBlur stdDeviation="3" in="SourceGraphic" result="blur"/>     
復制代碼

　　這樣，在另一個過濾器中，可以通過在in屬性中設置值為blur來使用它作為輸入源。

　　過濾器的尺寸

　　一個SVG過濾器的尺寸由x、y、width和height屬性來決定。

　　x和y屬性是相對于輸入源圖形的x和y屬性來設定。由于過濾器的輸出圖形通常會比輸入圖形大(例如對圖形添加模糊效果)，因此，我們通常需要將x和y屬性設置為負值來剪切掉多出的部分。

　　width和height屬性指定過濾器的寬度和高度，大多數時候你需要指定寬度和高度大于輸出圖像的尺寸，以便于在剪切后尺寸和原來的圖形基本相等。

　　多重過濾器

　　你可以通過<feMerge>元素來同時使用多個SVG過濾器。看下面的例子：
  1. <defs>
  2.     <filter id="blurFilter2" y="-10" height="40" x="-10" width="150">
  3.         <feOffset in="SourceAlpha" dx="3" dy="3" result="offset2" />
  4.         <feGaussianBlur in="offset2" stdDeviation="3"  result="blur2"/>

  6.         <feMerge>
  7.             <feMergeNode in="blur2" />
  8.             <feMergeNode in="SourceGraphic" />
  9.         </feMerge>
  10.     </filter>
  11. </defs>

  13. <ellipse cx="55" cy="60" rx="25" ry="15"
  14.          style="stroke: none; fill: #0000ff; filter: url(#blurFilter2);" />        
復制代碼

　　這個例子中創建了一個SVG過濾器，它包括兩個濾鏡元素：<feOffset>和<feGaussianBlur>。偏移濾鏡的輸入源是橢圓圖形的alpha通道，高斯模糊濾鏡的輸入源是偏移濾鏡的輸出。

　　<feMerge>元素將原始圖像和高斯模糊濾鏡的輸出相結合。在<feMerge>元素中的結合順序決定了它們的顯示順序，后輸入的元素會顯示在先輸入元素的上面。

　　上面的代碼得到的結果類似于一個drop陰影效果，下面是輸出的結果：
4.jpg
　　高斯模糊濾鏡

　　SVG高斯模糊濾鏡可以將圖像進行模糊處理。要使用高斯模糊濾鏡，可以使用元素。下面是一個例子：
  1. <defs>
  2.     <filter id="blurFilter4" x="-20" y="-20" width="200" height="200">
  3.         <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
  4.     </filter>
  5. </defs>
  6. <rect x="20" y="20" width="90" height="90"
  7.       style="stroke: none; fill: #00ff00; filter: url(#blurFilter4);" />         
復制代碼

　　這個例子中，在<filter>元素中使用了<feGaussianBlur>濾鏡。在矩形元素中的style屬性中使用filter來指向這個SVG過濾器，得到的結果如下面圖像所示：
5.jpg

　　模糊的尺寸

　　<feGaussianBlur>元素的stdDeviation屬性決定圖像的模糊尺寸大小。它的數值越大，圖像的模糊尺寸越大。在下面的例子中分別設置了三個不同的stdDeviation值。
  1. <defs>
  2.     <filter id="blurFilter5" x="-20" y="-20" width="200" height="200">
  3.         <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
  4.     </filter>
  5.     <filter id="blurFilter6" x="-20" y="-20" width="200" height="200">
  6.         <feGaussianBlur in="SourceGraphic" stdDeviation="6" />
  7.     </filter>
  8.     <filter id="blurFilter7" x="-20" y="-20" width="200" height="200">
  9.         <feGaussianBlur in="SourceGraphic" stdDeviation="12" />
  10.     </filter>
  11. </defs>

  13. <rect x="20" y="24" width="90" height="90"
  14.       style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);" />
  15. <rect x="150" y="24" width="90" height="90"
  16.       style="stroke: none; fill: #00ff00; filter: url(#blurFilter6);" />
  17. <rect x="300" y="24" width="90" height="90"
  18.       style="stroke: none; fill: #00ff00; filter: url(#blurFilter7);" />                 
復制代碼

　　得到的返回結果如下：
6.jpg

　　通過ALPHA通道進行模糊

　　在上面的例子中，過濾器的輸入源是SourceGraphic，意思是使用圖形的RGB顏色來作為輸入源。你也可以使用圖形的alpha通道來作為輸入源，只需要將<feGaussianBlur>元素的in屬性設置為SourceAlpha即可。下面是一個例子：
  1. <defs>
  2.     <filter id="blurFilter8" x="-20" y="-20" width="200" height="200">
  3.         <feGaussianBlur <b>in="SourceAlpha"</b> stdDeviation="10" />
  4.     </filter>
  5. </defs>
  6. <rect x="20" y="20" width="90" height="90"
  7.       style="stroke: none; fill: #00ff00; filter: url(#blurFilter8);" />               
復制代碼

　　得到的返回結果如下：
7.jpg
　　注意觀察，矩形的填充色是綠色的，但是通過alpha通道來進行模糊之后，得到的結果是黑白色的圖像。

　　偏移濾鏡

　　偏移濾鏡會將輸入圖形進行移動之后作為結果輸出。你可以使用它來上下左右移動圖形。通常偏移濾鏡都是用于制作drop陰影效果。下面是一個例子：
  1. <defs>
  2.     <filter id="offsetFilter1" x="-20" y="-20" width="200" height="200">
  3.         <feOffset in="SourceGraphic" dx="80" dy="20" />
  4.     </filter>
  5. </defs>
  6. <rect x="20" y="20" width="90" height="90"
  7.       style="stroke: #9a12b3; fill: none; filter: url(#offsetFilter1);" />
  8. <rect x="20" y="20" width="90" height="90"
  9.       style="stroke: #1f3a93; fill: none; " />
復制代碼

　　得到的結果如下所示：
8.jpg
　　這個例子中定義了兩個矩形，它們的尺寸和位置都相同。紫色描邊的矩形被應用了偏移濾鏡，使它相對于原來的位置向右移動了80個單位，向下移動了20各單位。

　　顏色矩陣濾鏡

　　顏色矩陣濾鏡用來在圖形的顏色中應用矩陣變換。下面是一個例子：
  1. <defs>
  2.     <filter id="colorMatrixFilter1" x="-20" y="-20" width="200" height="200">
  3.         <feColorMatrix in="SourceGraphic" type="matrix"
  4.                 values="0 0 0 1 0
  5.                         0 0 0 1 0
  6.                         0 0 0 1 0
  7.                         0 0 0 1 0
  8.                 "/>
  9.     </filter>
  10. </defs>
  11. <rect x="20" y="20" width="90" height="90"
  12.       style="stroke: none; fill: #049372; filter: url(#colorMatrixFilter1);" />
  13. <rect x="150" y="20" width="90" height="90"
  14.           style="stroke: #049372; fill: #049372;" />     
復制代碼

　　矩陣的值有<feColorMatrix>元素中的values屬性提供。這里共有4X5=20個值。在原始圖像中它們的值類似下面的樣子：
  1. 0 0 0 red   0
  2. 0 0 0 green 0
  3. 0 0 0 blue  0
  4. 0 0 0 1     0         
復制代碼

　　上面的代碼得到的返回結果如下：
9.jpg
　　注意觀察，左邊的圖形應用了顏色矩陣濾鏡，它原來有一個綠色的填充顏色，在使用了顏色矩陣之后只剩下描邊了。右邊是沒有使用顏色矩陣的圖形。

　　混合(BLEND)濾鏡

　　混合濾鏡可以將多個輸入濾鏡混合為一個。下面是一個例子：
  1. <svg width="500" height="100">
  2.   <defs>
  3.     <filter id="blurFilter3" y="-10" height="40" x="-10" width="150">
  4.       <feOffset in="SourceAlpha" dx="3" dy="3" result="offset3" />
  5.       <feGaussianBlur in="offset3" stdDeviation="3"  result="blur3"/>

  7.       <feBlend  in="SourceGraphic" in2="blur3" x="-10" width="160"/>

  9.     </filter>
  10.   </defs>

  12.   <ellipse cx="55" cy="60" rx="25" ry="15"
  13.          style="stroke: none; fill: #1f3a93;
  14.                 filter: url(#blurFilter3);" />

  16. </svg>           
復制代碼

　　這個例子聲明了三個濾鏡。第一個偏移濾鏡，第二個是高斯模糊濾鏡。高斯模糊濾鏡的輸入是偏移濾鏡的輸出。第三個<feBlend>濾鏡有兩個輸入，它將這兩個輸入進行了混合。

　　上面代碼得到的結果如下：
10.jpg
　　本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201507062179.html

【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會達到，所以這部分不是開發者能夠決定的，開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器，需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。，HTML5中國，中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富，HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端，他們覬覦移動原生應用人性化的操作體驗，特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品，或者是一個作品集，又或者僅僅只是一個靈感。在你發布到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那么回事。那么你接下
H5廣告，包括H5廣告的設計流程，究竟有什么講究，和階段。為了能幫助更多的人了解H5廣告，我專門做了一個講義。同時，也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有：框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板： 国产亚洲精品精品国产亚洲综合 | 日本不卡一区二区三区在线观看 | 99精品视频在线 | 日韩国产一区二区三区 | 黄色在线免费观看 | 精品久久一区 | 一级大片免费 | 特黄一级 | 99久久99久久精品国产片果冰 | 午夜精品一区二区三区在线观看 | 亚洲免费一区二区 | 久久精品久久综合 | 久久综合成人精品亚洲另类欧美 | 久久久亚洲一区 | 伊色综合久久之综合久久 | 久久天堂| 久久久国产精品 | 久久精品国产一区二区三区不卡 | 又爽又黄axxx片免费观看 | 久久精品成人一区 | 久久成人一区 | 国产成人免费 | 免费看黄视频网站 | 欧美成人高清视频 | 亚洲理论在线观看电影 | 久久a久久 | 日本人和亚洲人zjzjhd | 91美女视频| 久久久久久久综合色一本 | 亚洲国产欧美在线 | 久久国产成人午夜av影院武则天 | 美女爽到呻吟久久久久 | 欧美aaaa视频 | 国产精品一区二区日韩 | 精品国产乱码久久久久久丨区2区 | 国产精品99999999 | 黄网站在线观看 | 中文字幕在线一区二区三区 | 亚洲日韩中文字幕一区 | 91看片网| 91影院在线观看 |