SVG符号和使用

Question

我有一个SVG导入到我的文档中，其中包含许多符号。当我需要时，我的SVG就像use那样：

  <div class="sidebar-icon__icon">
    <svg><use xlink:href="#svg-box" /></svg>
  </div>

这很棒，我添加了一些如下所示的样式：

  .sidebar-icon__icon
    width: 30%
    margin-right: 10%
    float: left
    position: relative

    svg
      display: block
      width: 100%
      height: 100%

这使SVG很好地显示，但SVG元素非常高，图形垂直居中。像这样：

我可以通过将preserveAspectRatio="xMinYMin meet"添加到symbol定义来使图标位于此区域的顶部，但这并不会对SVG区域本身的高度产生任何影响。

为什么会发生这种情况以及如何解决这个问题。

谢谢， 尼尔

Answer 1

这里的问题是浏览器无法确定制作SVG的高度，因此它默认为＆＃34;内在＆＃34;高度为150px。

<div>的宽度通常是父宽度的100％，高度由其内容决定。

但是在这种情况下，您指定了<div>（30％）的宽度，但未指定高度。除此之外，您还没有<svg>官方宽度或高度。对于SVG，这些默认为100％。因此，在宽度的情况下，SVG的宽度为（30％-width）div的100％。但是，div的高度是不确定的。在这些情况下，浏览器具有＆＃34;内在的＆＃34;它们所依赖的宽度和高度。对于宽度，这是300px。高度为150px。 150px就是您使用的内容。

解决方案是为<div>或<svg>提供特定大小。或者将它们放在另一个具有固定大小的父元素中。