为什么 Edge 浏览器会裁剪图片？

Question

我有一些 .svg 文件。它们在 Chrome、Firefox 中正确显示，如下所示：但在 Edge 中，它们被修剪了：

我什么都试过了，但没有结果。似乎只有超大尺寸才能正确显示。那么我是否应该设置它的大小，例如 100px x 100px，然后缩放它？会不准确...

.button-wrapper {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 20px;
  top: 20px;
}

a {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  text-indent: -9999px;
  background-size: cover;
  background-position: center center;
  padding: 0;
  background-color: transparent;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.313' height='20.313' viewBox='0 0 20.313 20.313'%3E%3Cpath d='M2.978 2.978A9.783 9.783 0 0110.156 0a9.783 9.783 0 017.178 2.979 9.783 9.783 0 012.979 7.178 9.783 9.783 0 01-2.979 7.174 9.783 9.783 0 01-7.178 2.981 9.783 9.783 0 01-7.178-2.981A9.783 9.783 0 010 10.156a9.783 9.783 0 012.978-7.178zm13.257 1.1a8.282 8.282 0 00-6.079-2.516 8.282 8.282 0 00-6.079 2.515 8.282 8.282 0 00-2.515 6.079 8.282 8.282 0 002.515 6.075 8.282 8.282 0 006.079 2.519 8.282 8.282 0 006.079-2.519 8.282 8.282 0 002.515-6.079 8.282 8.282 0 00-2.515-6.075zm-7.446.806l4.687 4.686.488.586-.488.586-4.687 4.689-1.172-1.173 4.15-4.1-4.15-4.1z' fill='%232699fb'/%3E%3C/svg%3E");
}

<div class="button-wrapper">
  <a href="/" class="button">d</a>
</div>

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="20.313" height="20.313" viewBox="0 0 20.313 20.313"><defs><style>.a{fill:#2699fb;}</style></defs><path class="a" d="M5.322-16.553A9.783,9.783,0,0,1,12.5-19.531a9.783,9.783,0,0,1,7.178,2.979,9.783,9.783,0,0,1,2.979,7.178A9.783,9.783,0,0,1,19.678-2.2,9.783,9.783,0,0,1,12.5.781,9.783,9.783,0,0,1,5.322-2.2,9.783,9.783,0,0,1,2.344-9.375,9.783,9.783,0,0,1,5.322-16.553Zm13.257,1.1A8.282,8.282,0,0,0,12.5-17.969a8.282,8.282,0,0,0-6.079,2.515A8.282,8.282,0,0,0,3.906-9.375,8.282,8.282,0,0,0,6.421-3.3,8.282,8.282,0,0,0,12.5-.781,8.282,8.282,0,0,0,18.579-3.3a8.282,8.282,0,0,0,2.515-6.079A8.282,8.282,0,0,0,18.579-15.454Zm-7.446.806L15.82-9.961l.488.586-.488.586L11.133-4.1,9.961-5.273l4.15-4.1-4.15-4.1Z" transform="translate(-2.344 19.531)"/></svg>

[编辑]

解决方案:

我编辑了 SVG 文件：将 width="20.313" height="20.313" viewBox="0 0 20.313 20.313" 更改为 width="22" height="22" viewBox="-2 -2 24 24"。

Answer 1

解决方案：我编辑了 SVG 文件：将 width="20.313" height="20.313" viewBox="0 0 20.313 20.313" 更改为 width="22" height=" 22" viewBox="-2 -2 24 24".

为什么 Edge 浏览器会裁剪图片？

Why Edge browser trims images?

css

svg

microsoft-edge