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

SVG 的 CSS (.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 设置高度和宽度。

• 在 SVG 2 中，建议图像元素具有作为 CSS 属性的宽度和高度。

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