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" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <style>
svg { 
  background: white;
  width: 100%;
  height: 600px;
  padding: 0;
}
  </style>
  <title>SVG-Urfilter: feColorMatrix</title>
</head>
 
<body>
  <h1>SVG-Urfilter: feColorMatrix</h1>

  <svg viewBox="230 0 650 650">
  <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"
    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)"
    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)"
    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)"
    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)"
    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)"
    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)"
    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)"
    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)"
    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)"
    href="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg">
    <title>&lt;feColorMatrix type="luminanceToAlpha" result="tmp1" /></title>
  </image>	  
  </svg>
<p>Bewegen Sie die Maus über die Bilder! (Im title-Tooltipp sehen Sie die Werte für <code>feColorMatrix</code>!</p>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-Filter-02.html&oldid=86791“