css - 带有 viewBox 属性的 bootstrap 4 中的 SVG 标记不可预测地调整大小

Question

我开始设计响应式网站，从 SVG Logo 开始。根据 outstanding recommendations by Amelia Bellamy-Royds ，我为 viewBox、preserveAspectRatio、x、y、width 和 height 添加了属性。

我有很多问题，但真正让我感到困惑的两个是:

1) 当我缩小我的浏览器时，导航链接消失(即使 Logo 保持相同大小)，然后通过中间断点，SVG 变得巨大。

为什么 svg 的大小调整如此之大？

2) 我当前的 viewBox 是 viewBox="0 0 349 54"。当我减少这些数字时，比如说 0 0 175 25，svg 变得更大。当我增加它们时，比如说 0 0 3500 540，图像会变小。除了有时，减少数字会减小大小。任意更改这些数字如何增加或减少 svg 大小？

这里是相关的导航栏代码:

<nav class="navbar navbar-fixed-top navbar-dark bg-primary navbar-toggleable-md hidden-print"
     style="height:4em">
  <div class="row">
    <div class="col-md-2">
      <a class="navbar-brand"
         href="/">
        <svg viewBox="0 0 349 54"
             preserveAspectRatio="xMidYMid meet"
             x="0"
             y="0"
             width="100%"
             height="100%">
          <!-- SVG data goes here -->
        </svg>
      </a>
    </div>

    <div class="col-md-10">
      <button class="navbar-toggler navbar-inverse hidden-md-up navbar-toggler-left"
              type="button"
              data-toggle="collapse"
              data-target="#collapsingNavbar">
        ☰
      </button>

      <div class="collapse navbar-toggleable-md bg-primary"
           id="collapsingNavbar">
        <ul class="nav navbar-nav pull-right ml-auto">
          <li class="nav-item">
            <a class="nav-link"
               href="/home">
              <i class="fa fa-home"
                 aria-hidden="true"></i>
              Home
            </a>
          </li>

          [ ... ]

          <li class="nav-item">
            <a class="nav-link"
               href="/logout">
              <i class="fa fa-sign-out"
                 aria-hidden="true"></i>
              logout
            </a>
          </li>
        </ul>
      </div>  <!-- end collapsing navbar -->
    </div>  <!-- end col 10 -->
  </div>  <!-- end row -->
</nav>

感谢您的关注。相关的CSS如下。这些是我已覆盖或添加到 stock bootstrap 4 alpha 6 版本中的所有选择器:

body {
  padding-top:6rem;
}

body, html {
  height:100%;
}

/* workaround modal-open padding issue */
body.modal-open {
    padding-right:0 !important;
}


#sidebar {
   padding-left:0;
}

.bg-primary {
  background-color: #001A57;
}

.top-buffer { margin-top:20px; }
.bottom-buffer { margin-bottom:.5rem; display: inline-block; }

/*
 * Off Canvas at medium breakpoint
 * --------------------------------------------------
 */
@media screen and (max-width: 48em) {

  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -33%;
  }

  .row-offcanvas-left.active {
    left: 33%;
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 33%;
    height: 100%;
  }
}

/*
 * Off Canvas wider at sm breakpoint
 * --------------------------------------------------
 */
@media screen and (max-width: 34em) {
  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -45%;
  }

  .row-offcanvas-left.active {
    left: 45%;
  }

  .sidebar-offcanvas {
    width: 45%;
  }
}


/* responsive nav stacked liked 3.x */
@media(max-width:34em) {
    .navbar .navbar-brand {
        float:none;
        display: block;
    }
    .navbar .navbar-nav>.nav-item {
        float: none;
        margin-left: .1rem;
    }
    .navbar .navbar-nav {
        float:none !important;
    }
}

svg {
  font: 10px sans-serif;
}

.navbar-toggler {
  -webkit-align-self: inherit;
      -ms-flex-item-align: inherit;
          align-self: inherit;
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  position: absolute;
  right: 1em;
  top: .5em;
  color: white;
}

Answer 1

1) 你的 SVG 变得巨大因为你告诉它用 width="100%" 占用可用空间.当导航栏折叠成汉堡包图标时，它会填充剩余空间。如果你没有 width属性它仍然会填充剩余的空间。

2) viewBox定义了一个独立的用户协调空间。这与要绘制 SVG 元素的视口(viewport)坐标空间是分开的。不要混淆viewBox为 SVG 设置实际尺寸的值。

最初，用户坐标空间与视口(viewport)坐标空间相同，直到您为 viewBox 定义了一些值。 “改变现状。”

我喜欢想到 viewBox作为视口(viewport)坐标空间中 SVG 的“窗口”。 viewBox 的参数是 x y width height .第一个值viewBox说明从哪里开始 viewBox与视口(viewport)坐标空间相关，最后两个值提供其尺寸。

请密切关注viewBox值，<rect>每个示例中的属性将保持不变。我在调整 viewBox 时添加了一个粉红色的点供引用.

注意金箱已启动5从右边和5从视口(viewport)左上角向下坐标空间原点0,0 .

金框居中 viewBox .

viewBox从与视口(viewport)坐标空间相同的原点开始。

金盒首发5从右边是20宽所以viewBox需要第三个参数至少为 25显示整个盒子。为了创建相等的空白，我们添加 5总宽度为30 .

svg {
  width: 50%;
  border: 1px dashed indianred;
}

<svg viewBox="0 0 30 30">
  <rect x="5" y="5" width="20" height="20" fill="gold"/>
</svg>

viewBox从金框的中间开始。

viewBox从 15,15 开始视口(viewport)坐标空间。

金框偏移5开始，其宽度的一半是 10 ,

svg {
  width: 50%;
  border: 1px dashed indianred;
}

<svg viewBox="15 15 30 30">
  <rect x="5" y="5" width="20" height="20" fill="gold"/>
  <circle cx="15" cy="15" r="1" fill="hotpink"/>
</svg>

viewBox初始示例大小的两倍。

viewBox从与视口(viewport)坐标空间相同的原点开始。

viewBox现在显示 60x60视口(viewport)坐标空间的一部分。由于金框被绘制并放置在小于 60x60 的空间中，您会看到比以前更多的视口(viewport)坐标空间。

这会产生缩小效果。

svg {
  width: 50%;
  border: 1px dashed indianred;
}

<svg viewBox="0 0 60 60">
  <rect x="5" y="5" width="20" height="20" fill="gold"/>
  <circle cx="15" cy="15" r="1" fill="hotpink"/>
</svg>

viewBox初始示例大小的一半。

viewBox从与视口(viewport)坐标空间相同的原点开始。

viewBox现在显示 15x15视口(viewport)坐标空间的一部分。由于金框被绘制并放置在大于 viewBox 的空间中, 你只能看到金盒子的一部分。

这会产生放大效果。

svg {
  width: 50%;
  border: 1px dashed indianred;
}

<svg viewBox="0 0 15 15">
  <rect x="5" y="5" width="20" height="20" fill="gold"/>
  <circle cx="15" cy="15" r="1" fill="hotpink"/>
</svg>

**我稍后会尝试填写更多详细信息。