SVG für Web - möglich, Clipping über CSS ohne clipPath zu verwenden?

Ich bin (noch?) Nicht allzu versiert in der Verwendung von SVG für das Web. Was ich weiß, ist, dass einfache Formen besser sind als komplexe Pfade, wenn dies überhaupt möglich ist (aufgrund einfacher Punkte im Vergleich zu Pfadpunkten). Aus diesem Grund habe ich versucht, ein Logo mit sehr einfachen Pfaden (Ellipsen und Rechtecke, mit einigen Pfadformen – angepasste einfache Formen – wo nötig) nachzubilden.

Durch die Verwendung einfacher Formen und die Relevanz der Objektreihenfolge (oben/unten) kann ich bestimmte Bereiche des Logos verdecken, ohne auf Pfade zurückgreifen zu müssen. Leider muss dieser verdeckte Bereich für bestimmte Zwecke möglicherweise transparent sein.

Daher frage ich mich, ob es möglich ist, ein SVG zu erstellen, das definierte Pfade (von einfachen Objekten) verwendet, die als Beschneidungspfade über CSS-Deklarationen angewendet werden können, oder nur eine Volltonfarbe, je nachdem?

Beispiel:

Beispielbild

Hier muss das Weiß, das zum Erstellen des Weiß der Augen und des Mundes verwendet wird, möglicherweise transparent sein und das untere gelbe Objekt beschneiden. Zu anderen Zeiten kann es erforderlich sein, dass diese Objekte eine farbige Füllung haben. Benötige ich in diesem Beispiel zwei völlig separate Dateien, um das Problem zu lösen, oder ist es möglich, dies mit einer einzigen Datei zu tun? Wenn es sich um eine einzelne Datei handelt, müsste ich stattdessen auf Pfade anstelle einfacher Formen zurückgreifen?

Bearbeiten/Aktualisieren: Als ich mir die von Danielillo bereitgestellte Lösung genauer ansah (und nachdem ich die clip-path-Eigenschaft von CSS getestet hatte), entdeckte ich das filterElement und die Optionen von SVG. Der feFlood-Filter sollte die Fähigkeiten bieten, von denen ich ursprünglich nicht wusste, dass ich sie eigentlich suchte.

Antworten (1)

Hier ein Codepen mit dem gleichen SVG in zwei div:

  • Das erste mit einer Schnittmaske

  • Das zweite ist das gleiche SVG mit der Schnittmaske, aber mit einer anderen Form im Hintergrund:

    <!--THIS IS THE ADDED CIRCLE-->
<circle fill="red" cx="31.8" cy="31.8" r="31.6">   
<!--END-->
Ich denke, das Beispiel war nicht kompliziert genug, um zu zeigen, was ich speziell versucht habe, aber es scheint, dass es nicht möglich ist, Standardformen (durch Anvisieren ihrer ID) als Schnittmaske über CSS zu definieren, sie müssen im XML des SVG definiert werden Struktur als Schnittmaske. Liege ich mit dieser Annahme richtig?
Sicher wird es eine CSS-Lösung geben. Ich bin kein Programmierer, aber wenn mit fünfzehn min. Ich habe diesen gefälschten Trick, ein guter Programmierer kann die SVG-Maske wegnehmen.
Weitere Tests: clip-pathist die CSS-Regel, die verwendet werden kann, um ein benutzerdefiniertes Ansichtsfenster auf ein Element anzuwenden. In SVGs muss ein Beschneidungspfad außerhalb des normalen Flusses der definierten sichtbaren Pfade des SVG definiert werden (ein <clipPath>Element innerhalb des SVG- <defs>Elements). Quelle: sarasoueidan.com/blog/css-svg-clipping Abgesehen davon lieferte Ihre Lösung tatsächlich die Antwort, die ich eigentlich wollte, ohne es zu wissen: filter's feFlood; auch definiert in <def>. Das sollte mir alles bieten, was ich tun möchte. Danke schön! Ich werde meine Frage aktualisieren, um zu verdeutlichen, warum Ihre Antwort richtig ist. 👍
Eigentlich wollte ich eine richtige Maske definieren. Das war alles, was ich brauchte. Immer noch tolle Informationen und führte mich zur richtigen Antwort - danke Danielillo!
SVG für Web - möglich, Clipping über CSS ohne clipPath zu verwenden?
AntwortenHierDatenschutz-Bestimmungen1y, 0v