Beispiel:SVG-Filter-05.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">  
  <style>
svg {
  width: 100%;
  padding:0;
  margin:0;
  background: white;
}
.bsp {
  font-size: 100px; 
  fill:yellow;
  stroke:blue;
}
 
  </style>
  <title>Beispiel: feConvolveMatrix</title>
</head>
 
<body>
  <h1>SVG-Filter feConvolveMatrix<br>Präge- und Scharfzeichnungsfilter</h1>
 
<svg viewBox="0 0 880 500" >
<defs>

  <symbol id="doppeldecker">
      <path id="tragflaecheUnten" stroke="black" stroke-with="0.5" fill="red" 
	      d="m37,120 c-10,-20 55,-30 55,-40 0,0 45,-40 45,-30 15,15 -96,90 -100,70" />		  
    <path stroke="black" stroke-with="0.5" fill="red" 
	      d="m25,33 c-3,-30 21,-35 22,-3 30,5 15,-30 0,0 0,0 95,60 70,70 -30,25 -58,-40 -85,-60 -35,30 -35,-10 -7,-8" />	
	<path id="tragflaecheOben" stroke="black" stroke-with="0.5" fill="red" 
	      d="m20,85 c-10,-10 110,-70 105,-55 10,10 -105,75 -105,55" />	
    <path id="propeller" stroke="black" stroke-with="0.5" fill="black" 
	      d="m120,95 c5,-30 25,-30 0,0 -25,30 -5,30 0,0" />	
    <path id="streben" stroke="black" stroke-with="0.5" fill="none" 
	      d="m30,88 l15,15 c0,0 -5,-20 0,-20 m70,-40 l10,10 l-5,-14 m-40,68 l2,5 1-7" />	
	<circle cx="85" cy="115" r="4" fill="white" stroke="black" stroke-width="6"/>	
  </symbol>	
	
    <filter id="Präge">
      <feConvolveMatrix 
	    order="4"
	    preserveAlpha="true"
        kernelMatrix="
           1  0  0  0
           0  1  0  0
		   0  0  1  -1
           0  0  -1 -2" />
    </filter>
  
 
    <filter id="Präge2">
      <feConvolveMatrix 
	    order="5 5"
        preserveAlpha="true" 
        kernelMatrix="
		  -1  0 0 0 0
		   0 -2 0 0 0
		   0  0 3 0 0
		   0  0 0 0 0
		   0  0 0 0 0"/>
    </filter>
  
    <filter id="Schärfen">
      <feConvolveMatrix 
	      preserveAlpha="true" 
		  order="3 3" 
	      kernelMatrix="
		   0 -1  0 
		  -1  5 -1 
		   0 -1  0"/>
    </filter>
     
  </defs>

  <text transform="translate(10,50)" >ohne Filter</text>
  <use href="#doppeldecker" transform="translate(0,70)" />

  <text transform="translate(200,50)">Präge</text>
  <use href="#doppeldecker" transform="translate(200,70)" filter="url(#Präge)"/>
  <text class="bsp" transform="translate(200,300)" filter="url(#Präge)">Text</text>

  <text transform="translate(400,50)">Präge2</text>
  <use href="#doppeldecker" transform="translate(400,70)" filter="url(#Präge2)" />
  <text class="bsp" transform="translate(400,300)" filter="url(#Präge2)">Text</text>

  <text transform="translate(600,50)">Schärfen</text>
  <use href="#doppeldecker" transform="translate(600,70)" filter="url(#Schärfen)" /> 
  <text class="bsp" transform="translate(600,300)" filter="url(#Schärfen)">Text</text> 

</svg>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-Filter-05.html&oldid=78137“