与Chrome相比，SVG视图框在IE中呈现不同的位置

Question

我在外部渲染我的SVG精灵，但我遇到了视图框的问题。

<svg class="more-info__icon" viewBox="0 0 50 50">
    <use xlink:href="/_client/images/svgs.svg#next"></use>
</svg>

在Chrome中，渲染效果不错，但在IE中，SVG上的位置不正确。这是我的SVG精灵。

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="next" viewBox="25 25 50 50"><g fill="none" stroke="currentColor" stroke-miterlimit="10"><circle stroke-width="3" cx="49.4" cy="50" r="18.9"/><path stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M45.6 57.1l9.6-7.1-9.5-7.1"/></g></symbol></svg>

Answer 1

使用以下代码：

＆＃13;

＆＃13;

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="next" viewBox="25 25 50 50">
    <g fill="none" stroke="currentColor" stroke-miterlimit="10">
      <circle stroke-width="3" cx="49.4" cy="50" r="18.9" />
      <path stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M45.6 57.1l9.6-7.1-9.5-7.1" />
    </g>
  </symbol>
  <use xlink:href="#next" x="0" y="0" width="100" height="50" />
</svg>

＆＃13;

＆＃13;

＆＃13;

我无法重新创建问题:(它内联，因此渲染可能会有所不同）