SVG CSS | SVG 仅适用于 chrome

Question

我制作的 SVG 有问题。

它在 chrome 中运行良好，并且完全符合我的要求和期望，但我无法在任何其他浏览器中运行（目前已尝试使用 IE 和 Firefox）。

我的 SVG 是一张带有剪辑路径的图像，将其剪切成我想要的形状，这适用于跨越整个页面宽度的不同分辨率。下面是它在 chrome 中的样子，包括页面宽度扩展时的图像

SVG 的 html 如下所示

    <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 (.SCSS)

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

所有在 chrome 中都按预期工作，但请参阅下图的 Firefox，同样的事情也发生在 IE（版本 9 - 11）

我试过更改位置类型和显示类型，还设置了设置宽度和高度，但无法让它出现在其他浏览器中。

我有一个 SVG，它在页面的不同点使用了剪辑路径，这个工作正常，因此对这个造成了混淆。请参阅下图我的工作 SVG

inb4 我对 SVG 比较陌生

Answer 1

在 SVG 1.1 中，<image> 元素必须具有高度和宽度属性，即您不能通过 CSS.
[= 设置高度和宽度20=]
在 SVG 2 中建议图像元素的宽度和高度为 CSS 属性。

到目前为止，只有 Chrome 实现了 SVG 2 规范的这一部分。

SVG CSS | SVG 仅适用于 chrome

SVG CSS | SVG only works in chrome

html

css

svg

cross-browser