Kann CSS :before und :after Pseudoelemente Inline-SVGs formatieren?

Styling von Inline-SVGs mit CSS :before und :after

Verwendung der CSS-Pseudoelemente :before und :after zum Stylen von Inline-SVG-Elementen hat sich als Herausforderung erwiesen. Trotz seines Potenzials, die visuelle Wirkung von SVGs zu verbessern, stößt dieser Ansatz aufgrund der Natur von SVGs als ersetzte Elemente auf Einschränkungen.

Die :before- und :after-Pseudoelemente werden hauptsächlich zum Generieren von Inhalten innerhalb eines Elements verwendet. Dies führt zu anonymen ersetzten Elementen. SVGs sind jedoch bereits ersetzte Elemente, was es schwierig macht, mithilfe generierter Inhalte zusätzlichen Inhalt einzufügen.

Das bereitgestellte Beispiel (http://jsfiddle.net/wD56Q/) zeigt das Problem, bei dem der mit :before definierte Stil hat keinen Einfluss auf das SVG. Dies liegt daran, dass SVGs ebenso wie Bilder keine generierten Inhalte enthalten können. Sie gelten als atomar und können nicht durch CSS-Eigenschaften beeinflusst werden, die ihren internen Inhalt ändern.

Um diese Einschränkung zu überwinden, könnte man experimentelle Lösungen wie CSS :outside erkunden, ein Pseudoelement, das generierte Inhalte außerhalb des ersetzten Elements platziert statt darin. Allerdings befindet sich dieser Ansatz noch in der Entwicklung und wird möglicherweise nicht allgemein unterstützt.

Zusammenfassend lässt sich sagen, dass die direkte Gestaltung von Inline-SVG-Elementen mit CSS :before und :after derzeit nicht unterstützt wird. Da SVGs ersetzte Elemente sind, können sie keinen generierten Inhalt enthalten. Andere Ansätze wie CSS :outside könnten in Zukunft potenzielle Lösungen bieten, ihre Einführung bleibt jedoch ungewiss.

Das obige ist der detaillierte Inhalt vonKann CSS :before und :after Pseudoelemente Inline-SVGs formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!