Beispiel:SVG-Filter-02.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html lang="de">
<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 { 
  background: white;
  border: 1px dotted #3983ab;
  width: 96%;
  height: 700px;
  padding: 0;
  }
  </style>
  <title>Beispiel: Der primitive Filter feColorMatrix</title>
</head>
 
<body>
  <h1>Beispiel: Der primitive Filter feColorMatrix</h1>
 
  <main>
  <svg viewbox="0 0 900 700">
  <title>Der primitive Filter feColorMatrix</title>
 
  <defs>
    <desc>
      9 Beispiele für die Verwendung von feColorMatrix
    </desc>
    <filter id="f1">
      <feColorMatrix type="matrix" values="1 0 0 1 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/>
    </filter>
    <filter id="f2">
      <feColorMatrix type="matrix" values="0 0 0 0 0, 1 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/>
    </filter>
    <filter id="f3">
      <feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 1 0, 0 0 0 1 0"/>
    </filter>
    <filter id="f4">
      <feColorMatrix type="hueRotate" values="90" />
    </filter>
    <filter id="f5">
      <feColorMatrix type="hueRotate" values="-90" />
    </filter>
    <filter id="f6">
      <feColorMatrix type="hueRotate" values="180" />
    </filter>
    <filter id="f7">
      <feColorMatrix type="saturate" values="0" />
    </filter>
    <filter id="f8">
      <feColorMatrix type="luminanceToAlpha" values="0"/>
    </filter>
    <filter id="f9">
      <feColorMatrix type="luminanceToAlpha" result="tmp1" />
      <feComposite in="SourceGraphic" in2="tmp1"
        operator="in" />
    </filter>
  </defs>
 
  <image x="10" y="10" width="200px" height="200px"
    xlink:href="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>Lauf an der Pegnitz - normal ohne Filter</title>
  </image>	
  <image x="230" y="10" width="200px" height="200px" filter="url(#f1)"
    xlink:href="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>&lt;feColorMatrix type="matrix" values="1 0 0 1 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/></title>
  </image>	
  <image x="450" y="10" width="200px" height="200px" filter="url(#f2)"
    xlink:href="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>&lt;feColorMatrix type="matrix" values="0 0 0 0 0, 1 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/></title>
  </image>	
  <image x="670" y="10" width="200px" height="200px" filter="url(#f3)"
    xlink:href="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>&lt;feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 1 0, 0 0 0 1 0"/></title>
  </image>	
  <image x="230" y="230" width="200px" height="200px" filter="url(#f4)"
    xlink:href="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>&lt;feColorMatrix type="hueRotate" values="90" /></title>
  </image>	
  <image x="450" y="230" width="200px" height="200px" filter="url(#f5)"
    xlink:href="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>&lt;feColorMatrix type="hueRotate" values="-90" /></title>
  </image>	
  <image x="670" y="230" width="200px" height="200px" filter="url(#f6)"
    xlink:href="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>&lt;feColorMatrix type="hueRotate" values="180" /></title>
  </image>	
  <image x="230" y="450" width="200px" height="200px" filter="url(#f7)"
    xlink:href="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>&lt;feColorMatrix type="saturate" values="0" /></title>
  </image>	
  <image x="450" y="450" width="200px" height="200px" filter="url(#f8)"
    xlink:href="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>&lt;feColorMatrix type="luminanceToAlpha" values="0"/></title>
  </image>	
  <image x="670" y="450" width="200px" height="200px" filter="url(#f9)"
    xlink:href="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>&lt;feColorMatrix type="luminanceToAlpha" result="tmp1" /></title>
  </image>	  
 
  </svg>
  </main>
</body>
</html>