SVG 在移动 Safari 中渲染得更小

Question

我正在创建一个自定义 SVG 按钮，但我无法弄清楚为什么在移动 Safari 中我的图标渲染比所有其他浏览器小得多。

.HTML

<button>
<svg viewBox="0 0 24 24">
<path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
</svg>
</button>

.CSS

button {
/* Button Reset */
border: none;
outline: none;
margin: 0;
width: auto;
overflow: visible;
background: transparent;
/* inherit font & color from ancestor */
font: inherit;
/* Corrects font smoothing for webkit */
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
box-sizing: border-box;
display: block;
cursor: pointer;
width: 42px;
height: 42px;
border-radius: 50%;
}
svg {
display: block;
margin: 0 auto;
width: 80%;
height: 80%;
fill: #5f6368;
}

代码笔链接

目标： 使图标在各大浏览器中的大小相同。

Answer 1

这里的问题是我的"按钮重置"不完整。 我需要为按钮设置填充 0。