Beispiel:SVG-Filter-feDiffuseLighting-2.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%;
  height: 600px;
  padding:0;
}

text {
   font-family: serif; 
   font-size: 25px;
}

</style>
  <title>Urfliter: feDiffuseLighting-2</title>
</head>
 
<body>
  <h1>Urfliter: feDiffuseLighting - 2</h1>
<svg viewBox="0 0 880 600">
  <defs>
  <filter id="Relief" width="100%" height="100%" x="0" y="0">
    <feColorMatrix in="SourceGraphic" type="luminanceToAlpha"/>
    <feDiffuseLighting surfaceScale="10" lighting-color="white">
      <feDistantLight azimuth="50" elevation="50"/>
    </feDiffuseLighting>
  </filter>
 <filter id="sobel" color-interpolation-filters="sRGB" width="100%" height="100%" x="0" y="0">
    <feColorMatrix type="matrix" in="SourceGraphic" result="RA" values="0 0 0 0 1
          0 0 0 0 1
          0 0 0 0 1
          1 0 0 0 0"></feColorMatrix>
    <feColorMatrix type="matrix" in="SourceGraphic" result="GA" values="0 0 0 0 1
          0 0 0 0 1
          0 0 0 0 1
          0 1 0 0 0"></feColorMatrix>
    <feColorMatrix type="matrix" in="SourceGraphic" result="BA" values="0 0 0 0 1
          0 0 0 0 1
          0 0 0 0 1
          0 0 1 0 0"></feColorMatrix>
    <feDiffuseLighting in="RA" result="R" surfaceScale="8.0">
      <feDistantLight elevation="90"></feDistantLight>
    </feDiffuseLighting>
    <feDiffuseLighting in="GA" result="G" surfaceScale="8.0">
      <feDistantLight elevation="90"></feDistantLight>
    </feDiffuseLighting>
    <feDiffuseLighting in="BA" result="B" surfaceScale="8.0">
      <feDistantLight elevation="90"></feDistantLight>
    </feDiffuseLighting>
    <feColorMatrix type="matrix" in="R" result="RS" values="-1 0 0 0 1
          0 0 0 0 0
          0 0 0 0 0
          0 0 0 0 1"></feColorMatrix>
    <feColorMatrix type="matrix" in="G" result="GS" values="0 0 0 0 0
          0 -1 0 0 1
          0 0 0 0 0
          0 0 0 0 1"></feColorMatrix>
    <feColorMatrix type="matrix" in="B" result="BS" values="0 0 0 0 0
          0 0 0 0 0
          0 0 -1 0 1
          0 0 0 0 1"></feColorMatrix>
    <feComposite in="RS" in2="GS" result="RSGS" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"></feComposite>
    <feComposite in="RSGS" in2="BS" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"></feComposite>
  </filter>
  </defs>

<text x="10" y="40">ohne Filter</text>
<image x="10" y="60" width="100px" height="100px"
    href="http://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>Lauf an der Pegnitz - normal ohne Filter</title>
</image>

<text x="170" y="40">Relief</text>
<image x="120" y="60" width="400px" height="400px" filter="url(#Relief)" 
    href="http://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>Lauf an der Pegnitz - normal ohne Filter</title>
</image>

<text x="580" y="40">Sobel-Filter</text>
<image x="530" y="60" width="400px" height="400px" filter="url(#sobel)" 
    href="http://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>Lauf an der Pegnitz - normal ohne Filter</title>
</image>

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