CSS logo.svg mask und background

Hallo,

ich bräuchte Hilfestellung bei der Darstellung eines SVG-Logos.

Code:

---

<div class="logo">
  <a href="./" title="Lupus">
    <div class="logoImg"></div>
  </a>
</div>

---

Code:

---

.logo .logoImg {
    mask: url(/files/theme/img/logo.svg);
    display: block;
    height: 160px;
    width: auto;
    background-size: cover;
    background-color: #fff;
    mask-repeat: no-repeat;
    overflow: visible;
    transition: all 0.3s ease;
}

---

Firefox stellt das Logo einwandfrei dar.
Opera, Brave, Vivaldi und Chrome stellen nur das Rechteck in der Hintergrundfarbe dar.

Warum benötige ich diese Ausführung?
SOLL:
- das SVG-Logo in Weiss soll mit transparentem Hintergrund im Header (keine Hintergrundfarbe) mit "buntem" Bild sichtbar sein.
- scrollt man die Seite nach unten bekommt der Header die Klasse .shrink und damit einen weissen Hintergrund und das Logo wird schwarz dargestellt

Code:

---

.shrink .logo .logoImg {
    height: 80px;
    background-color: #000;
}

---

caniuse.com sagt wohl, dass mask: bei modernen Browsern funktioniert ...

Kann mir hier jemand unter die Arme greifen und weiterhelfen, wie ich den Farbwechsel Browserübergreifend hinbekomme.

da verbläst man Stunden mit Recherche und kaum fragt man öffentlich um Hilfe, springt einem doch noch die notwendige Info an :D

mask-image ist die richtige Schreibweise. Und dann braucht's noch die Prefixes ...

Code:

---

  .logoImg {
    -webkit-mask-image: url(/files/theme/img/logo.svg);
    mask-image: url(/files/theme/img/logo.svg);
    display: block;
    height: 160px;
    width: auto;
    background-size: cover;
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    overflow: visible;
    transition: all .3s ease;
  }

---

Könnte man in der svg nicht auch einfach currentColor setzen und dann via css die color ändern?

s.a.:
https://css-tricks.com/cascading-svg-fill-color/
https://kulturbanause.de/blog/das-cu...yword-von-css/

@Franko

Das geht aber doch nur wenn man es so wie hier beschrieben direkt in HTML einbindet - leider , denn nicht immer ist es möglich oder sinnvoll dass so einzubinden.

Zitat:

---

Zitat von Bennie

@Franko

Das geht aber doch nur wenn man es so wie hier beschrieben direkt in HTML einbindet - leider , denn nicht immer ist es möglich oder sinnvoll dass so einzubinden.

---

Yepp - aber wenn ich schon svg's nutze möchte ich auch die max. Möglichkeiten nutzen können.