HTML5 中的可缩放矢量图形（SVG）- 过滤器和渐变

look_w

过滤器和渐变除了目前为止许多示例中的基本 CSS 样式，SVG 图形还支持使用过滤器和渐变。本节将介绍如何向 SVG 图形应用过滤器和渐变。            
过滤器可以使用过滤器向 SVG 图形应用特殊的效果。SVG 支持以下过滤器。

• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight

请参见 ，了解使用这些过滤器的详细说明。            
清单 14 创建了一种应用到矩形上的投影效果。            
清单 14. 创建矩形的投影效果

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">           <defs>                    <filter id="f1" x="0" y="0"                              width="200%" height="200%">                          <feOffset result="offOut" in="SourceAlpha"                               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="green"                    stroke-width="3" fill="yellow" filter="url(#f1)"/> </svg>

清单 14 中的代码会生成图 14 中的图形。
图 14. 一个矩形的投影效果过滤器在 def（表示定义）元素中定义。本示例中的过滤器分配了一个 id"f1"。filter 标记本身拥有定义过滤器的 x 和 y 坐标及宽度和高度的属性。在 filter 标记中，可以使用想要的过滤器元素并将其属性设置为想要的值。            
定义过滤器之后，使用 filter 属性将它与一个特定图形关联，如  中所示。将 url 值设置为您分配给过滤器的 id 属性的值。            
渐变渐变 是从一种颜色到另一种颜色逐渐的过渡。渐变具有两种基本形式：线性和径向渐变。所应用的渐变类型由您使用的元素确定。以下示例展示了应用于一个椭圆形的线性和径向渐变。            
清单 15 创建了一个具有线性渐变的椭圆。
清单 15. 创建一个具有线性渐变的椭圆

1 2 3 4 5 6 7 8 9 10 11 12 13

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">          <defs>             <linearGradient id="grad1" x1="0%" y1="0%"                      x2="100%" y2="0%">            <stop offset="0%"                      style="stop-color:rgb(255,255,0);stop-opacity:1"/>            <stop offset="100%"                      style="stop-color:rgb(255,0,0);stop-opacity:1"/>            </linearGradient>          </defs>          <ellipse cx="200" cy="70" rx="85" ry="55"                         fill="url(#grad1)"/> </svg>

清单 15 中的代码会生成图 15 中的图形。
图 15. 具有线性渐变的椭圆清单 16 创建了一个具有径向渐变的椭圆。
清单 16. 创建一个具有径向渐变的椭圆

1 2 3 4 5 6 7 8 9 10 11 12 13

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">              <defs>                      <radialGradient id="grad1" cx="50%" cy="50%"                             r="50%" fx="50%" fy="50%">                      <stop offset="0%"                             style="stop-color:rgb(255,255,255);stop-opacity:0"/>                      <stop offset="100%"                             style="stop-color:rgb(255,0,0);stop-opacity:1"/>                      </radialGradient>              </defs>              <ellipse cx="200" cy="70" rx="85" ry="55"                      fill="url(#grad1)"/> </svg>

清单 16 中的代码会生成图 16 中的图形。
图 16. 具有径向渐变的椭圆像过滤器一样，渐变在 def 元素内定义。每个渐变分配有一个 id。渐变属性（比如颜色）可使用 stop 元素在渐变标记内设置。要将渐变应用于图形，可以将 fill 属性的 url 值设置为想要的渐变的 id。