html - 与 chrome 相比，SVG viewbox 在 IE 中呈现不同的位置

Question

我在外部渲染我的 SVG Sprite 图，但我遇到了 View 框的问题。

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

在 Chrome 中，这呈现得很好，但在 IE 中，SVG 上的位置不正确。这是我的 SVG Sprite 。

<?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

使用以下代码:

<?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>

我无法重现问题:(它是内联的，所以呈现可能不同)