Beispiel:SVG-Filter-10.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: 96%;
  padding: 0;
}
text {
  font-size: 14px; 
}
 
  </style>
  <title>SVG-Urfilter: feImage</title>
</head>
 
<body>
  <h1>SVG-Urfilter: feImage</h1>

<svg viewBox="0 0 650 280" >
<defs>
  <symbol id="wolke">
    <path stroke="blue" stroke-with="1" fill="skyblue"
	      d="m40,40 c0,0 20,-50 30,0 0,0 10,-40 40,0 0,0 40,-50 30,30 20,20 -0,30 -30,20 0,0 -20,50 -30,0 0,0 -30,50 -40,-20 0,0 -45,-30 0,-30" />
  </symbol>
  
  <svg id="doppeldecker">
    <rect width="200" height="200" stroke="black" stroke-width="1" fill="none"/>
    <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"/>	  	  	  
  </svg>	

  <filter id="image" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
     <feImage x="0" y="0" width="200" height="200" href="http://wiki.selfhtml.org/images/c/c8/Wolke.png" result="img" />
  </filter>

  <filter id="Vektorgrafik" x="0" y="0"  filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" href="http://wiki.selfhtml.org/images/2/21/Burg.svg" result="img" />
  </filter>
  
  <filter id="Fragment" x="0" y="0"  filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="100%" height="100%" href="#doppeldecker" result="img" />
  </filter>


</defs>

  <text x="20" y="20">Rastergrafik</text>
  <rect width="200" height="200" 
        transform="translate(10,50)" 
		filter="url(#image)" 
  />
  
  <text x="220" y="20">Vektorgrafik</text>
  <rect width="200" height="200" 
        transform="translate(210,50)" 
		filter="url(#Vektorgrafik)" 
  />
  
  <text x="440" y="20">SVG-Fragment</text>
  <rect width="200" height="200" 
        transform="translate(420,50)" 
		filter="url(#Fragment)" 
  />

</svg>
<p><b>Beachten Sie:</b> Der Firefox hat hier einen alten Bug und unterstützt keine Referenzierungen von internen SVG-Fragmenten.</p>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-Filter-10.html&oldid=86797“