Wie kann ich mithilfe von CSS einen Schlagschatten zu einer SVG-Datei hinzufügen?

Ist es möglich, mithilfe von CSS einen Schlagschatten auf SVG anzuwenden?

CSS kann verwendet werden, um verschiedene Effekte auf Elemente auf einer Webseite anzuwenden, einschließlich Schlagschatten. Allerdings wird die Box-Shadow-Eigenschaft für SVG-Elemente nicht direkt unterstützt.

Um einen Schlagschatteneffekt für SVG zu erzielen, können Sie die CSS-Filtereigenschaft verwenden. Diese Eigenschaft wird von modernen Browsern unterstützt, einschließlich Webkit-Browsern, Firefox 34 und Edge. Es ist auch ein Polyfill verfügbar, das Unterstützung für Firefox-Versionen unter 34 und IE6 bietet.

So verwenden Sie die Filtereigenschaft, um einem SVG einen Schlagschatten hinzuzufügen:

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

Das können Sie Verwenden Sie diesen Filter für verschiedene SVG-Elemente wie Rechteck, Kreis und Pfad. Zum Beispiel:

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

Dadurch wird ein Rechteck mit einem Schlagschatten erstellt. Sie können die Position, Unschärfe und Farbe des Schattens anpassen, indem Sie die Werte in der Schlagschattenfunktion ändern.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS einen Schlagschatten zu einer SVG-Datei hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!