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是带有多个图标的Sprite。所以我想从x位置= 135的精灵接收某些图标。这在IE，Chrome，Firefox中非常有效，但在Edge中却不行。 svg和Edge有什么问题？

Answer 1

EDGE 44上的相同问题：Edge似乎无法正确集成Sprites。但是它在SVG内联中效果很好。请参见CAN IUSE注意：“ IE9-11台式机和移动设备无法正确缩放SVG文件。”添加高度，宽度，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上无法正常工作

1 个答案: