css 背景属性中的内联 Svg 在 Edge 上无法正常工作

Question

我有以下 html 文件

  <body>
    <p></p>
  </body>

我想添加 :before 和这样的 svg 背景

p:before {
    content: '';        
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    background: url("sprite.svg#svgView(viewBox(135, 0, 11, 11))");
    background-size: 100% 100%;
}

sprite.svg 是一个带有多个图标的精灵。所以我想从 x 位置 = 135 处的精灵接收某些图标。这在 IE、Chrome、Firefox 中完美运行，但在 Edge 中却不行。 svg 和 Edge 有什么问题？

Answer 1

EDGE 44 上的相同问题：Edge 似乎没有正确集成 Sprites。但它在 SVG 内联中运行良好。请参阅 CAN IUSE 说明："IE9-11 desktop & mobile do not properly scale SVG files." 添加高度、宽度、viewBox 和 CSS 规则似乎是最好的解决方法。 ” 去考可以吗？如果不是这里的项目：A project on Github 但我还没有测试 ps。我删除了精灵并放置了内联元素。

<svg
    width="54"
    height="54"
    viewBox="0 0 54 54"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
 <path
    d="M18.6667 34.1429V52H2V19.8571L27 219.8571V52H35.3333V34.1429H18.6667Z"
    stroke="white"
    stroke-width="2"

    stroke-linecap="round"
     stroke-linejoin="round"/>
 </svg>

css 背景属性中的内联 Svg 在 Edge 上无法正常工作

Inline Svg in css background property doesn't work on Edge properly

svg

sprite

microsoft-edge

inline-svg

css 背景 属性 中的内联 Svg 在 Edge 上无法正常工作

Inline Svg in css background property doesn't work on Edge properly

svg

sprite

microsoft-edge

inline-svg

css 背景属性中的内联 Svg 在 Edge 上无法正常工作