nicht angemeldet
SVG-Datei als mask-image
MudGuard
Rolf BMoin,
ich habe gerade ein, für mich nicht nachvollziehbares, Phänomen erlebt und hoffe, ihr könnt den Hintergrund aufklären.
Ich möchte ein SVG als Maske in CSS nutzen und irgendwie wollte das nicht funktionieren. Ich habe dann ein funktionierendes Online-Beispiel Stück für Stück in meine lokale Umgebung übertragen und den Knackpunkt gefunden.
Sobald ich die SVG-Datei lokal abgelegt und verknüpft hatte, stellte die Maske ihren Dienst ein. Und seitdem ich den Apache gestartet habe und mir die Seite vom Server ausliefern lasse, funktioniert wieder alles wie erwartet.
Die Masken-Funktionalität der CSS-Eigenschaft mask-image mit externer SVG hängt also davon ab, ob die SVG-Datei vom Server ausgeliefert wird oder nicht‽ Ich kann mir nur vorstellen, dass es mit dem MIME-Type zu tun hat. Ich habe allerdings zu wenig (bis gar keine) Ahnung von Servern, so dass ich meine Vermutung nicht selbst überprüfen kann/möchte. Geht meine Annahme in die richtige Richtung?
Mögliche Folgefrage: warum benötigt dieselbe SVG-Datei als background-image: url(mask.svg); keinen Server, aber als mask-image: url(mask.svg); schon?
Grüße vom Buchhalter
-
Hi,
Sobald ich die SVG-Datei lokal abgelegt und verknüpft hatte, stellte die Maske ihren Dienst ein.
IIRC gilt eine lokale Datei als "anderer Origin" im Sinne der Same Origin Policy …
cu,
Andreas a/k/a MudGuard-
Hallo MudGuard,
genau.
Ich habe gerade etwas geforscht. Eigentlich möchte man erreichen, dass CORS auch für Bilder gilt, kann das aber aus Kompatibilitätsgründen nicht durchsetzen. Das halbe Web verwendet Bilder aus fremden Origins, teils erlaubt, teils unerlaubt, und wenn man CORS für <img src> forcieren würde, bräche das halbe Web zusammen. Das gleiche gilt für background-image.
mask-image ist hingegen neu und deshalb hat man sich entschieden, dass hier keine Kompatibilität zu wahren ist. Und CORS dafür aktiviert.
https://issues.chromium.org/issues/41356272
Rolf
--
sumpsi - posui - obstruxi
-