SVG CSS | SVGはクロムでしか動作しません。

Question

私が作成したSVGに問題があります。

これはChromeでうまく動作し、私が欲しいものも期待していますが、他のブラウザ（これまでIEとFirefoxを試してみました）で動作させることはできません。

私の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> 

SVGのためのCSS（.SCSSを次のようにSVGのHTMLが見える

を拡張する際の画像を含むクロムでどのように見えるかです）

#mobile-svg { 
     margin-bottom: -3px; 
     background-color: #5fb6e0; 
     .cls-image { 
      width: 100%; 
      height: 115%; 
     } 
    } 

期待どおりのクロームで動作しますが、Firefoxの場合は下の画像を参照してください。 Gはまた、IE（バージョン9から11）で発生

Iはまた、設定された幅とehightsを設定し、位置タイプと表示タイプを変更しようとしているが、それは他のブラウザに表示され得るカント。

私は、ページ内の別の場所でクリップパスを使用するSVGを使用していますが、これはうまく動作するため、このための混乱が生じます。私は<image>要素は、高さと幅の属性を持っている必要がありますSVG 1.1ではSVGの

Answer 1

• に比較的新しいですinb4あなたは高さを設定することはできませんつまり

  

  私の作業SVGの下の画像を参照してください。 CSSを介して幅を指定します。

• SVG 2では、イメージ要素がCSSプロパティである幅と高さを持つことが提案されています。

これまでSVG 2仕様のこの部分を実装しているのは、Chromeだけです。