Beispiel:SVG-Filter-14.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" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <style>
svg {
  width: 96%;
  padding:0;
  margin:0;
  background: white;
}

 
</style>
  <link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <style>
svg {
  width: 96%;
  padding:0;
  margin:0;
  background: white;
}

text {
  font-size:14px;
}
  </style>
  <title>Beispiel: feSpecularLighting</title>
</head>
 
<body>
  <h1>SVG-Filter feSpecularLighting</h1>
 
  <main>

<svg viewBox="0 0 880 500" >
<defs>
  <filter id="specular1">
	 <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
			<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" 
                          specularExponent="10" lighting-color="white"  
                          result="specOut">
				<fePointLight x="-50" y="-100" z="200"/>
			</feSpecularLighting>
			<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
			<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                   k1="0" k2="1" k3="1" k4="0" result="out2"/>
			<feMerge>
				<feMergeNode in="out2"/>
			</feMerge>
  </filter>

  <filter id="specular2">
	 <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
			<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" 
                          specularExponent="10" lighting-color="white"  
                          result="specOut">
				<fePointLight x="-500" y="-1000" z="2000"/>
			</feSpecularLighting>
			<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
			<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                   k1="0" k2="1" k3="1" k4="0" result="out2"/>
			<feMerge>
				<feMergeNode in="out2"/>
			</feMerge>
  </filter>
  
    <filter id="specular3">
	 <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
			<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" 
                          specularExponent="10" lighting-color="white"  
                          result="specOut">
				<feDistantLight azimuth="45" elevation="45"/>
			</feSpecularLighting>
			<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
			<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                   k1="0" k2="1" k3="1" k4="0" result="out2"/>
			<feMerge>
				<feMergeNode in="out2"/>
			</feMerge>
  </filter>

    <filter id="specular4">
	 <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
			<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" 
                          specularExponent="10" lighting-color="white"  
                          result="specOut">
				<feSpotLight x="-20" y="5" z="30" limitingConeAngle="45"
                   pointsAtX="10" pointsAtY="10" pointsAtZ="0"/>
			</feSpecularLighting>
			<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
			<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                   k1="0" k2="1" k3="1" k4="0" result="out2"/>
			<feMerge>
				<feMergeNode in="out2"/>
			</feMerge>
  </filter>

  <symbol id="kreis">
    <circle  cx="50" cy="50" r="50" fill="#3983ab" ></circle>
  </symbol>	
  <symbol id="viereck">
    <rect x="0" y="0" width="100" height="100" fill="#dfac20" />
  </symbol>
  <symbol id="dreieck">
    <path d="M0,0 h100 l-50,85z" fill="#c32e04" />
  </symbol>
  
</defs>

  <text x="20" y="25">kein Filter</text>
  <use xlink:href="#kreis"
        transform="translate(10,50)"
  />
  <use xlink:href="#viereck"
        transform="translate(10,200)"
  />
    <use xlink:href="#dreieck"
        transform="translate(10,350)"
  />
 
  
  <text x="170" y="25">fePointLight</text>
  <text x="170" y="45">x="50" y="-100" z="200"</text>  
  <use xlink:href="#kreis"
        transform="translate(200,50)"
           filter="url(#specular1)" 
  />
  <use xlink:href="#viereck"
        transform="translate(200,200)"
           filter="url(#specular1)" 
  />
    <use xlink:href="#dreieck"
        transform="translate(200,350)"
           filter="url(#specular1)" 
  />	

  <text x="360" y="25">fePointLight</text>
  <text x="360" y="45">x="500" y="-1000" z="2000"</text> 
  <use xlink:href="#kreis"
        transform="translate(350,50)"
           filter="url(#specular2)" 
  />
  <use xlink:href="#viereck"
        transform="translate(350,200)"
           filter="url(#specular2)" 
  />
    <use xlink:href="#dreieck"
        transform="translate(350,350)"
           filter="url(#specular2)" 
  />	

  <text x="560" y="25">feDistantLight</text>
  <text x="560" y="45">azimuth="45" elevation="45""</text> 
  <use xlink:href="#kreis"
        transform="translate(550,50)"
           filter="url(#specular3)" 
  />
  <use xlink:href="#viereck"
        transform="translate(550,200)"
           filter="url(#specular3)" 
  />
    <use xlink:href="#dreieck"
        transform="translate(550,350)"
           filter="url(#specular3)" 
  />	

  <text x="760" y="25">feSpotLight</text>  
    <use xlink:href="#kreis"
        transform="translate(750,50)"
           filter="url(#specular4)" 
  />
  <use xlink:href="#viereck"
        transform="translate(750,200)"
           filter="url(#specular4)" 
  />
    <use xlink:href="#dreieck"
        transform="translate(750,350)"
           filter="url(#specular4)" 
  />	

</svg>


  </main>

</body>
</html>