SVG CSS | SVG funktioniert nur in Chrom

Question

Probleme mit einem SVG habe ich gemacht.

Es funktioniert gut in Chrom und tut genau das, was ich will und erwarte es auch, aber ich kann es in keinem anderen Browser funktionieren (versuchte IE und Firefox bis jetzt).

Mein SVG ist ein Bild mit einem Clip-Pfad, der es in die gewünschte Form schneidet, und das funktioniert bei verschiedenen Auflösungen, die die gesamte Seitenbreite umfassen. Unten ist, wie es in Chrom mit einem Bild aussieht, wenn die Seitenbreite

Die html erweitert für die SVG

<svg id="mobile-svg" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 875.67 321.8" preserveAspectRatio="none"> 
     <defs> 
      <style>.cls-1{fill:#60b6e1;}</style> 
     </defs> 
     <clipPath id="myClip"> 
      <path d="M0,0S1,7.68,12.63,18.54,364.25,297.4,364.25,297.4s30.77,27.3,84.06.38,379.59-192,379.59-192S873.34,87.5,875.67,0H0Z" transform="translate(0)"></path> 
     </clipPath> 
     <image class="cls-image" xlink:href="http://localhost:63342/Carfinance247Rebrand/Content/img/carDrivingImage.png" clip-path="url(#myClip)"/> 
    </svg> 

Die CSS für das SVG (.SCSS wie folgt aussieht)

Alle funktioniert in Chrome wie erwartet, aber siehe Bild unten für Firefox, die gleiche dünn g geschieht auch in IE (Version 9 - 11)

Ich habe versucht, Positionstypen und Anzeigetypen ändern, auch Schränkungsweite und ehights Einstellung aber kann nicht bekommen es in anderen Browsern angezeigt werden.

Ich habe ein SVG, das Clip-Pfade an einem anderen Punkt auf der Seite verwendet und dieses funktioniert gut, daher die Verwirrung für dieses. Siehe Bild unten von meiner Arbeits SVG

inb4 ich relativ neu bin SVG

Answer 1

• In SVG 1.1 ein <image> Element muss Höhe und Breite Attribute, dh Sie die Höhe nicht einstellen und Breite über CSS.

• In SVG 2 wird vorgeschlagen, dass Bildelemente Breite und Höhe haben, die CSS-Eigenschaften sind.

Nur Chrome hat diesen Teil der SVG 2-Spezifikation bisher implementiert.