SVG CSS | SVG僅適用於Chrome瀏覽器

遇到了我所提出的SVG問題。SVG CSS | SVG僅適用於Chrome瀏覽器

它在Chrome中運行良好，並且完全符合我的要求並期待它，但我無法在任何其他瀏覽器中使用它（嘗試過IE和Firefox）。

我的SVG是一個剪輯路徑的圖像，將其剪切成我想要的形狀，這適用於跨越整個頁面寬度的不同分辨率。下面是它的外觀鍍鉻包括當頁面寬度擴大

的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>

的CSS的SVG的HTML的圖像（.SCSS ）

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

所有作品均按照預期在Chrome中顯示，但下面的圖爲Firefox，同樣薄克也發生在IE（版本9 - 11）

我試圖改變位置類型和顯示類型，還設置設定寬度和ehights但不能得到它出現在其他瀏覽器。

我是一個SVG，它在頁面中的不同位置使用剪輯路徑，並且這個工作正常，因此對這個問題很困惑。請參閱我下面的工作SVG

inb4的形象我是比較新的SVG的

來源

2016-04-18 Kieranmv95

@Paulie_D IE瀏覽器支持剪輯路徑用於SVG元素上的url剪輯路徑 –

@Paulie_D我有一個SVG在IE瀏覽器上的一個clp路徑在頁面中的不同點，它工作正常 – Kieranmv95

在SVG 1.1 <image>元素必須有高度和寬度屬性，即你不能設置高度和通過CSS的寬度。
在SVG 2中，提出圖像元素的寬度和高度都是CSS屬性。

只有Chrome到目前爲止實現了SVG 2規範的這一部分。

來源

2016-04-18 10:33:29

我添加了設置寬度和高度到圖像，它現在出現和縮放在其他瀏覽器，但我有一個快速的問題，在IE瀏覽器它伸出圖像的正常形狀，而鉻和ff保持不變 – Kieranmv95

SVG CSS | SVG僅適用於Chrome瀏覽器

回答

相關問題