SVG рендеринг меньше в мобильном Safari - PullRequest
Новая
       3

SVG рендеринг меньше в мобильном Safari

0 голосов
/ 11 января 2020

Я создаю пользовательскую кнопку 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;
}

кодовая ссылка

Цель : сделать значок одинакового размера во всех основных браузерах.

...