0

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

4

1 回答 1

0

EDGE 44 上的同样问题：Edge 似乎没有正确集成 Sprite。但它在 SVG 内联中效果很好。请参阅 CAN IUSE 说明：“IE9-11 桌面和移动设备无法正确缩放 SVG 文件。” 添加高度、宽度、视图框和 CSS 规则似乎是最好的解决方法。“ 测试可以吗？如果不是这里的项目：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>
于 2019-06-29T18:19:03.027 回答