如何将 SVG 放置在与文本内嵌的位置？

Question

我有一个 SVG，我想将其放置在一些内联文本旁边作为导航栏的一部分，如下所示：

现在的问题是它与 SVG 不内联。它看起来像这样，从导航栏溢出：

这是我的 HTML 片段（它有点大，所以点击“显示代码片段”）：

.navbar {
  height: 95px;

  margin: 0;
  padding-left: 50px;
  padding-right: 50px;

  box-shadow: 0 3px 4px grey;

  list-style-type: none;
}

.navbar > li {
  height: 100%;

  float: right;
}

.navbar > .navbar-logo {
  width: 75px;
  height: 75px;

  margin: 10px;

  float: left;

  font-family: 'Oswald', sans-serif;
  font-size: 50px;
}

.logo-compass-frame {
  fill: none;
  stroke: black;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.logo-compass-north, .logo-compass-south {
  stroke: black;
  stroke-width: 8;
  stroke-miterlimit: 10;
}

.logo-compass-south {
  fill: none;
}

.logo-compass-center {
  fill: black;
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

<ul class="navbar">
  <li class="navbar-logo">
    <svg x="0px" y="0px" viewBox="0 0 272.6 272.6">
      <circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8"></circle>
      <polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5"></polygon>
      <polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1"></polygon>
      <circle class="logo-compass-center" cx="138" cy="136.6" r="5.7"></circle>
    </svg>
    <span>Text</span>
  </li>
</ul>

position: absolute我通过文本将其达到所需的内联状态span。但这使文本超出了li.

如何将文本与 SVG 内联放置（不带position: absolute）？我希望li在其范围内包含 SVG 和文本。

Answer 1

您的主要问题是，由于某种原因，您将<li>宽度设置为较窄：

.navbar > .navbar-logo {
  width: 75px;
  height: 75px;
}

只需去掉那些宽度和高度值即可。你不需要它们。该宽度和高度应该应用于 SVG。

.navbar > .navbar-logo > svg {
  width: 75px;
  height: 75px;
  vertical-align: top;
}

其vertical-align作用是使文本顶部与 SVG 顶部对齐。另外，我们提供文本line-height: 75px;，以便它自动与 SVG 垂直居中。

最终结果

（去掉一些其他不必要的部分后）

.navbar > .navbar-logo {
  width: 75px;
  height: 75px;
}

.navbar > .navbar-logo > svg {
  width: 75px;
  height: 75px;
  vertical-align: top;
}