SVG - Filter

SVG verwendet das Element <filter>, um Filter zu definieren. Das <filter> -Element verwendet ein id-Attribut, um es eindeutig zu identifizieren. Filter werden in <def> -Elementen definiert und dann von Grafikelementen anhand ihrer IDs referenziert.

SVG bietet eine Vielzahl von Filtern. Im Folgenden finden Sie eine Liste der häufig verwendeten Filter.

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - Filter für Schlagschatten
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Erklärung

Es folgt die Syntaxdeklaration von <filter>Element. Wir haben nur Hauptattribute gezeigt.

<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>

Attribute

Sr.Nr.	Name & Beschreibung
1	filterUnits- Einheiten zum Definieren des Filtereffektbereichs. Es gibt das Koordinatensystem für die verschiedenen Längenwerte innerhalb des Filters und für die Attribute an, die den Filterunterbereich definieren. Wenn filterUnits = "userSpaceOnUse" ist, stellen Werte Werte im aktuellen Benutzerkoordinatensystem dar, die zum Zeitpunkt der Verwendung des Elements 'filter' vorhanden sind. Wenn filterUnits = "objectBoundingBox" ist, stellen Werte Werte in Bruchteilen oder Prozentsätzen des Begrenzungsrahmens des referenzierenden Elements dar, die zum Zeitpunkt der Verwendung des 'filter'-Elements vorhanden waren. Standard ist userSpaceOnUse.
2	primitiveUnits- Einheiten zum Definieren des Filtereffektbereichs. Es gibt das Koordinatensystem für die verschiedenen Längenwerte innerhalb des Filters und für die Attribute an, die den Filterunterbereich definieren. Wenn filterUnits = "userSpaceOnUse" ist, stellen Werte Werte im aktuellen Benutzerkoordinatensystem dar, die zum Zeitpunkt der Verwendung des Elements 'filter' vorhanden sind. Wenn filterUnits = "objectBoundingBox" ist, stellen Werte Werte in Bruchteilen oder Prozentsätzen des Begrenzungsrahmens des referenzierenden Elements dar, die zum Zeitpunkt der Verwendung des 'filter'-Elements vorhanden waren. Standard ist userSpaceOnUse.
3	x- x-Achsen-Koordinate des Filterbegrenzungsrahmens. Defeault ist 0.
4	y- y-Achsenkoordinate des Filterbegrenzungsrahmens. Standard ist 0.
5	width- Breite des Filterbegrenzungsrahmens. Standard ist 0.
6	height- Höhe des Filterbegrenzungskastens. Standard ist 0.
7	filterRes - Zahlen, die Filterbereiche darstellen.
8	xlink:href - wird verwendet, um auf einen anderen Filter zu verweisen.

Beispiel

testSVG.htm

<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>

Zwei <filter> -Elemente, definiert als filter1 und filter2.
Der feGaussianBlur-Filtereffekt definiert den Unschärfeeffekt mit der Unschärfemenge unter Verwendung von stdDeviation.
in = "SourceGraphic" definiert, dass der Effekt für das gesamte Element gilt.
Der feOffset-Filtereffekt wird verwendet, um einen Schatteneffekt zu erzeugen. in = "SourceAlpha" definiert, dass der Effekt für den Alpha-Teil von RGBA-Grafiken gilt.
<rect> -Elemente verknüpften die Filter mithilfe des Filterattributs.

Ausgabe

Öffnen Sie textSVG.htm im Chrome-Webbrowser. Sie können Chrome / Firefox / Opera verwenden, um SVG-Bilder direkt ohne Plugin anzuzeigen. Internet Explorer 9 und höher unterstützt auch das Rendern von SVG-Bildern.

Filter mit Schatteneffekt

<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>

Ausgabe