SVG-フィルター

SVGは<filter>要素を使用してフィルターを定義します。 <filter>要素はid属性を使用して一意に識別します。フィルターは<def>要素内で定義され、IDによりグラフィック要素によって参照されます。

SVGは豊富なフィルターセットを提供します。以下は、一般的に使用されるフィルターのリストです。

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
形態学
feOffset-ドロップシャドウのフィルター
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

宣言

以下は、 <filter> 要素の構文宣言です。主な属性のみを示しました。

<filter
   filterUnits="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"

   x="x-axis co-ordinate"
   y="y-axis co-ordinate"

   width="length"
   height="length"

   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

属性

Sr.No.	Name & Description
1	filterUnits − units to define filter effect region. It specifies the coordinate system for the various length values within the filter and for the attributes defining the filter subregion. If filterUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the 'filter' element is used. If filterUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the 'filter' element is used. Default is userSpaceOnUse.
2	primitiveUnits − units to define filter effect region. It specifies the coordinate system for the various length values within the filter and for the attributes defining the filter subregion. If filterUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the 'filter' element is used. If filterUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the 'filter' element is used. Default is userSpaceOnUse.
3	x − x-axis co-ordinate of the filter bounding box. Defeault is 0.
4	y − y-axis co-ordinate of the filter bounding box. Default is 0.
5	width − width of the filter bounding box. Default is 0.
6	height − height of the filter bounding box. Default is 0.
7	filterRes − numbers representing filter regions.
8	xlink:href − used to refer to another filter.

例

テストVG

<html>
   <title>SVG Filter</title>
   <body>

      <h1>Sample SVG Filter</h1>

      <svg width="800" height="800">

         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
            </filter>

            <filter id="filter2" 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>

         <g>
            <text x="30" y="50" >Using Filters (Blur Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)"/>
         </g>

      </svg>

   </body>
</html>

filter1およびfilter2として定義された2つの<filter>要素。
feGaussianBlurフィルター効果は、stdDeviationを使用して、ぼかし効果でぼかしの量を定義します。
in = "SourceGraphic"は、効果が要素全体に適用可能であることを定義します。
feOffsetフィルター効果は、シャドウ効果を作成するために使用されます。 in = "SourceAlpha"は、効果がRGBAグラフィックのアルファ部分に適用可能であることを定義します。
<rect>要素は、フィルター属性を使用してフィルターをリンクしました。

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

影付きフィルター

<html>
   <title>SVG Filter</title>
   <body>

      <h1>Sample SVG Filter</h1>

      <svg width="800" height="800">

         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
            </filter>

            <filter id="filter2" 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>

         <g>
            <text x="30" y="50" >Using Filters (Shadow Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)"/>
         </g>

      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

Svg-filters

目次

SVG-フィルター

宣言

属性

例

出力

影付きフィルター

出力