SVG 在 Safari 中未正确对齐

Question

我正在混合使用文本和 SVG 元素来为我正在开发的网站创建分页。但是，在 Safari 中，SVG 垂直偏离中心显示。

火狐：

Safari：

这可能是什么原因造成的？

这是我用来创建它的代码：

body {
    background: #353535;
}

.facetwp-pager, .mv-pagination {
  text-align: center;
  margin: 15px auto 40px;
}

.facetwp-page,
.pager,
.pager svg {
    display: inline-block;
    font-size: 16px;
    height: 30px;
    width:31px;
    line-height: 30px;
    overflow: hidden;
}

.facetwp-page, .pager {
    display: inline-block;
    margin-right: 6px;
    cursor: pointer;
    color: #bbbbbb;
}

.facetwp-page.pager path {
  fill: #b7b7b7;
  -webkit-transition: fill 0.25s;
  -moz-transition: fill 0.25s;
  transition: fill 0.25s;
}

.facetwp-page.pager:hover path {
  fill: #FFF;
}

.pager.inactive {
  cursor: default;
}

.pager.inactive path {
  fill: #232323;
}

.pager.inactive:hover path {
  fill: #232323;
}

.facetwp-page.current {
  color: #2fe3c4;
  position: relative;
}

.facetwp-page.current:before {
  border: 1px solid #2fe3c4;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  content: " ";
  display: block;
  height: 28px;
  left: 0;
  position: absolute;
  width: 28px;
}

.facetwp-pager-label {
    display: inline-block;
    margin-right: 12px;
}

<div class="facetwp-pager">
  <a class="facetwp-page pager" data-page="1">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="45.5" height="45.5" viewBox="0 0 45.5 45.5" enable-background="new 0 0 45.543 45.543" xml:space="preserve">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 22.8c0 12.6 10.2 22.8 22.8 22.8 12.6 0 22.8-10.2 22.8-22.8C45.5 10.2 35.3 0 22.8 0 10.2 0 0 10.2 0 22.8zM13.7 22.8c0-0.6 0.2-1.2 0.7-1.6l0.3-0.3c0 0 0.1-0.1 0.1-0.1l9.2-9.2c0.9-0.9 2.4-0.9 3.3 0l0.3 0.3c0.9 0.9 0.9 2.4 0 3.3l-7.7 7.7 7.7 7.7c0.9 0.9 0.9 2.4 0 3.3L27.2 34c-0.9 0.9-2.4 0.9-3.3 0l-9.2-9.2c0 0-0.1-0.1-0.1-0.1l-0.3-0.3C13.9 24 13.7 23.4 13.7 22.8z"></path>
    </svg>
  </a>
  <a class="facetwp-page" data-page="1">1</a>
  <a class="facetwp-page current" data-page="2">2</a>
  <a class="facetwp-page" data-page="3">3</a>
  <a class="facetwp-page" data-page="4">4</a>
  <a class="facetwp-page pager" data-page="3">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="45.5" height="45.5" viewBox="0 0 45.5 45.5" enable-background="new 0 0 45.543 45.543" xml:space="preserve">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M22.8 0C10.2 0 0 10.2 0 22.8c0 12.6 10.2 22.8 22.8 22.8 12.6 0 22.8-10.2 22.8-22.8C45.5 10.2 35.3 0 22.8 0zM31.2 24.4l-0.3 0.3c0 0-0.1 0.1-0.1 0.1l-9.2 9.2c-0.9 0.9-2.4 0.9-3.3 0L18 33.7c-0.9-0.9-0.9-2.4 0-3.3l7.7-7.7 -7.7-7.7c-0.9-0.9-0.9-2.4 0-3.3l0.3-0.3c0.9-0.9 2.4-0.9 3.3 0l9.2 9.2c0 0 0.1 0.1 0.1 0.1l0.3 0.3c0.5 0.4 0.7 1 0.7 1.6C31.9 23.4 31.7 24 31.2 24.4z"></path>
    </svg>
  </a>
</div>

Answer 1

有点旧，但请尝试将vertical-align: middle; 添加到

.facetwp-page, .pager {
    display: inline-block;
    margin-right: 6px;
    cursor: pointer;
    color: #bbbbbb;
}