SVG innerhalb von CSS

CSS Inline SVG -Filter: Ein leistungsstarker Bildverarbeitungs -Tipps

In einem Artikel "Ich habe heute gelernt" (TIL) von Stefan Judis erklärt, wie man SVG -Filter in CSS inliniert. filter Filterattribut von CSS unterstützt einige integrierte Funktionen wie grayscale(100%) usw., kann jedoch auch auf Filter verweisen, die durch SVG definiert sind. Sie können filter: url(#my-custom-filter) verwenden, wobei der Filter inline definiert ist<svg></svg> Im Element als<filter></filter> Teil des Elements. Diese Methode erfordert einen Hinweis auf HTML, was etwas ungeschickt ist. Filter sind visuelle Effekte, die logischer für die Integration in CSS sind. Beispiele sind wie folgt:

 img {
  Filter: URL ('Daten: Bild/SVG XML, \
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter color-interpolation-filters="linearRGB" filterunits="objectBoundingBox" height="140%" primitiveunits="userSpaceOnUse" width="140%" x="-20%" y="-20%"> \
        <feturbulence basefrequency="0.01 0.01" numoctaves="1" result="turbulence" seed="1" stitchtiles="noStitch" type="turbulence"></feturbulence> \
        <fedisplacementmap in="SourceGraphic" in2="turbulence" result="displacementMap" scale="20" xchannelselector="G" ychannelselector="A"></fedisplacementmap> \
      </filter>\
    </svg>#Waves ')
  ;
}

Dies ist Stefans Turbulenzfilterbeispiel, das mit CSS allein nicht möglich ist.

Bitte beachten Sie die große Anzahl von Backslashes ( \ ). Dies macht eine Hoffnung, dass CSS auch Vorlagen -Literale unterstützen kann. Gleichzeitig betrifft es auch, ob die Tools oder Komprimierungswerkzeuge für die Codeformatierung diese Backslashes behandeln. In Wirklichkeit kann dies jedoch kein Problem verursachen.

Zum Glück behält der SVG -Code eine gute Lesbarkeit und Bearbeitbarkeit bei. Daher können Sie die SVG -Filter direkt in CSS und Experiment bearbeiten.

Gleiches gilt für die Tools von Yoksel. Sein Editor für zwei- und dreifarbige Bilder ist sehr cool. Sie können diese Filter auch direkt auf CSS anwenden.

SVGs, die in CSS eingefügt wurden, sind jedoch nicht auf Filter beschränkt. Sie können auch SVG -Zeichnungen direkt in CSS einbetten.

Diese Methode funktioniert in modernen Browsern (außer Safari) einwandfrei. In naher Zukunft müssen wir jedoch Sonderzeichen in SVG mehr codieren, um sie zum Laufen zu bringen (obwohl Base64 -Codierung nicht erforderlich ist). Der URL -Encoder von Yoskel ist dafür ausgelegt, aber ich weiß nicht, ob es jetzt noch notwendig ist.

Das obige ist der detaillierte Inhalt vonSVG innerhalb von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!