Bootstrap-vue 将 svg 图像显示为导航项?

Posted

技术标签:

【中文标题】Bootstrap-vue 将 svg 图像显示为导航项?【英文标题】:Bootstrap-vue display svg image as nav-item? 【发布时间】:2021-01-12 16:31:23 【问题描述】:

我想在 NavBar 的右上角显示 Octocat 图像:

在以下 Vue Snippet 中,该图标仅在 <b-nav-item> 包含一些文本时可见:

<template>
  <div>
    <b-navbar toggleable="lg" type="dark" variant="dark">
      <b-navbar-brand href="#">NavBar</b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav class="ml-auto">
          <b-nav-item> Test </b-nav-item>
          <!-- Icon not visible -->
          <b-nav-item>
            <svg
              class="navbar-nav-svg"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 499.36"
              focusable="false"
            >
              <title>GitHub</title>
              <path
                d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"
                fill="currentColor"
                fill-rule="evenodd"
              ></path>
            </svg>
          </b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>

<script>
export default 
  name: "App",
;
</script>

https://codesandbox.io/s/holy-wind-7h9nn

【问题讨论】:

【参考方案1】:

我假设您从 Vue Bootstrap 获得了这个 sn-p,并且您没有注意到缺少的 navbar-nav-svg 类:

<style scoped>
.navbar-nav-svg 
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: text-top;

</style>

【讨论】:

【参考方案2】:

您的解决方案很好,但我建议只将 height 属性添加到 svg 标签:

 <svg
      class="navbar-nav-svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 499.36"
      focusable="false"
        
            >

【讨论】:

以上是关于Bootstrap-vue 将 svg 图像显示为导航项?的主要内容,如果未能解决你的问题,请参考以下文章

使用 iText 将 SVG 转换为 PDF,SVG 未在 PDF 中完全显示

Bootstrap-Vue:将角色权限实现为多个 b-form-checkbox 数组,在 b-table 中显示为列。不工作

CSS 大纲属性未在 Firefox 中显示为 SVG 图像?

悬停时更改 SVG 填充和文本突出显示颜色

将 SVG 动画转换为图像序列

svg 剪辑图像并显示中风