鍍金池/ 教程/ HTML/ SVG陰影效果

SVG鏈接

1. SVG鏈接

SVG陰影效果

1. SVG陰影效果

SVG線性漸變

1. SVG線性漸變

SVG文本

1. SVG文本

SVG平面陰影

1. SVG平面陰影

SVG圖表

1. SVG圖表

SVG交互

1. SVG交互

SVG時(shí)鐘

1. SVG時(shí)鐘

SVG漸變

1. SVG漸變

SVG <pattern>元素

1. SVG <pattern>元素

SVG簡(jiǎn)介

1. SVG簡(jiǎn)介

SVG徑向漸變

1. SVG徑向漸變

SVG <filter>元素

1. SVG <filter>元素

SVG對(duì)話框效果

1. SVG對(duì)話框效果

SVG形狀

1. SVG形狀

SVG stroke屬性

1. SVG stroke屬性

SVG圖形

1. SVG圖形

SVG教程

1. SVG教程

SVG事件監(jiān)聽器

1. SVG事件監(jiān)聽器

SVG加載器示例

1. SVG加載器示例

SVG腳本(JavaScript)

1. SVG腳本(JavaScript)

SVG圖標(biāo)

1. SVG圖標(biāo)

SVG拖動(dòng)

1. SVG拖動(dòng)

SVG模糊效果

1. SVG模糊效果

SVG陰影效果

在SVG中，為了顯示陰影效果，使用<feOffset>元素。要做到這一點(diǎn)，請(qǐng)使用SVG圖形并將其在x-y平面上稍稍移動(dòng)一點(diǎn)。

示例代碼

<!DOCTYPE html>  
<html>  
<body>  


<svg height="250" width="250">  
  <defs>  
    <filter id="p1" x="0" y="0" width="200%" height="200%">  
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />  
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />  
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />  
    </filter>  
  </defs>  
  <rect width="90" height="90" stroke="blue" stroke-width="3" fill="purple" filter="url(#p1)" />  
  </svg>  

</body>  
</html>

說明

<filter>的id屬性為模式定義了一個(gè)唯一的名稱。
<rect>元素的filter屬性用于將元素鏈接到“p1”濾鏡。

上面代碼，在瀏覽器中顯示如下 -

上一篇：SVG <pattern>元素下一篇：SVG圖表