Wie kann ich SVG-Schlagschatten mit CSS3-Filtern erstellen?

SVG-Schlagschatten mit CSS3

Das Erstellen von Schlagschatten für SVG-Elemente mit CSS3 kann verwirrend erscheinen, insbesondere angesichts der fehlenden direkten Unterstützung für traditionelle box-shadow- und -webkit-box-shadow-Eigenschaften. Es gibt jedoch einen praktikablen Workaround mit CSS-Filtern.

Verwendung von CSS-Filtern

CSS-Filter bieten eine Möglichkeit, visuelle Effekte auf SVG-Elemente anzuwenden. Um mit dieser Methode einen Schlagschatten zu erstellen, können Sie die Filtereigenschaft mit der Funktion drop-shadow() verwenden.

Syntax

.element {
  filter: drop-shadow(horizontal-offset vertical-offset blur-radius color);
}

Beispiel

.shadow {
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
}

Kompatibilität

Die Der drop-shadow()-Filter wird in modernen Browsern unterstützt, einschließlich:

• Webkit-Browser
• Firefox 34
• Edge

Polyfill

Für Browser, die den drop-shadow()-Filter nicht unterstützen, Sie können eine Polyfüllung verwenden. Ein beliebtes Polyfill ist [CSS Shadow](https://github.com/mdn/css-shadow), das Unterstützung für Firefox

Anwenden des Schlagschattens

Sie können den Schlagschatten auf jedes SVG-Element anwenden. Fügen Sie einfach die Schattenklasse zum Element hinzu:

<svg>
  <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66"></rect>
</svg>

Fazit

Mit CSS-Filtern können Sie mit minimalem Codierungsaufwand Schlagschatten für SVG-Elemente erstellen. Diese Technik ist mit modernen Browsern kompatibel und unterstützt browserübergreifendes Rendern mithilfe einer Polyfüllung.

Das obige ist der detaillierte Inhalt vonWie kann ich SVG-Schlagschatten mit CSS3-Filtern erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!