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

【问题标题】：Inline Svg in css background property doesn't work on Edge properlycss 背景属性中的内联 Svg 在 Edge 上无法正常工作
【发布时间】：2019-06-30 05:34:50
【问题描述】：

我有以下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 有什么问题？

【问题讨论】：

你能在 JsFiddle 或其他地方创建一个 sn-p 吗？

标签： svg sprite microsoft-edge inline-svg

【解决方案1】：

EDGE 44 上的同样问题：Edge 似乎没有正确集成 Sprite。但它在 SVG 内联中效果很好。请参阅 CAN IUSE 说明：“IE9-11 桌面和移动设备无法正确缩放 SVG 文件。”添加高度、宽度、视图框和 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>

【讨论】：

您能否添加回答问题的代码示例，以您当前给出的解释为后盾。