Beispiel:SVG-text-filter-9.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"> <title>Text in Knitterlook</title> <style> .knitter { background: whitesmoke; border: thin solid; filter: url(#distort); font-size: 1.25em; font-family: sans-serif, Arial; padding: 1em; }

svg { position: absolute; }

body { 

 max-width: 50em;

} </style> </head>

<body>

Text in Knitterlook

Unter Grafikfiltern versteht man Funktionen in einer Grafiksoftware, die ein bestehendes digitales Bild mit einem vorprogrammierten Algorithmus gezielt verändern. Der Begriff lehnt sich an die Filter im Bereich der Fotografie an. <p>Mit <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Filter">SVG-Filtern</a> haben Sie viele Möglichkeiten für grafische Pixelmanipulationen, die das Repertoire des Webdesigners erweitern. Dabei gibt es viele spektakuläre Möglichkeiten, aber auch zwei Nachteile:

  • SVG-Filter verändern das Bild beim Laden immer wieder neu, komplexere Filter bringen so leistungsschwächere Mobilgeräte zum Glühen und Ruckeln.
  • Der Aufbau mit vielen Kind-Elementen und XML-Attributen ist eher etwas für Raketenwissenschaftler als für den Hobby-Entwickler.

    • <p>Dies ist heute besser geworden. Filter sind heute Bestandteil von CSS[1]; mit der CSS-filter-Eigenschaft können viele Algorithmen bequem in HTML, aber auch in SVG eingebunden werden. </div>

    <p>Quelle: <a href="https://henry.codes/writing/how-to-distort-text-with-svg/">How To Distort Text With SVG Filters</a> (henry.codes)</p>


    <svg> <defs> <filter id="distort"> <feTurbulence baseFrequency="0.005 0.005" numOctaves="1" result="noise" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="9"> </filter> </defs> </svg>

    </body>

    </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-text-filter-9.html&oldid=100029“