制作一排相同大小的缩放 svg，让我可以调整它们的大小（基于宽度）而不破坏设计答案

【问题标题】：Making a row of equal-size scaling svgs that will allow me to adjust their size (based on width) and not break the design制作一排相同大小的缩放 svg，让我可以调整它们的大小（基于宽度）而不破坏设计
【发布时间】：2016-04-10 15:26:09
【问题描述】：

所以我想要一行大小相同的 svg，下面有一些文本（如导航栏，但稍大一些）。我几乎让它工作了，但我所拥有的有一些问题。只是要清楚这就是我想要的：

我希望 SVG 能够根据容器的宽度进行媒体响应/缩放。
所有内容都需要水平居中。
我希望按钮容器小于 100%（例如 80 或 90），以便有更大的左右边距（但仍居中）。
无论下面的标签文本大小如何，我都希望 svg 保持相同的大小（在我当前的版本中，不相等的文本破坏了我的 sn-p 显示的设计）。
因为我不太确定我想要的最终外观如何，所以我真的很想要一个强大的设计，它可以让我将 svg 调整为更大或更小，同时基本保持整体设计/结盟。所以，如果我决定在我的最终实现中我希望 svg 稍微大一点（可能是 250% 宽度，而不是 200%），我可以通过仅调整这个或仅调整几个其他参数/边距来保留整体设计。

我有一个版本在这个 sn-p 中几乎是正确的，但是有一些问题。最大的问题是，如果一个孩子的文本比其他孩子的文本长并且如果您使显示变小，则列/svgs 的大小会变得不同。如果您更改最后一项中的文本以匹配其他项，一切看起来都不错 - 但我不希望文本大小影响 svgs 的大小。

在所需的实现中，svg 大小应仅取决于两件事：1）包含 div 的大小（即可能是页面的 80%）和 2）包含 div 宽度的百分比（例如，如果有 3项目，它的宽度/大小应该考虑到 33% ，如果有四个项目，这个数字将是 25% 等）。这是 sn-p，您可以在其中看到一个项目的较长文本使 svgs 的比例不相等。我需要 svg 始终平等地缩放。

如果您能提供帮助，我将不胜感激！谢谢！

这里是sn-p：测试时请确保您的浏览器很小，否则您可能不会产生不等比例的缩放。

.areaSVG {
  width: 200%;
  height: 1px;
  overflow: visible;
  margin: 0 33%;
  box-sizing: content-box;
}
.ey-col-svg {
  display: block;
  margin-bottom: 34%;
}
.ey-nav-bar {
  padding-right: 4%;
  background-color: #333;
}
ul.ey-row-scale {
  max-height: 80px;
  padding-bottom: 2%;
  padding-left: 14%;
  /*padding left  + widht = 100*/
  display: table;
  position: relative;
  width: 75%;
  max-width: 100%;
  overflow: hidden;
}
.ey-col-1 {
  position: relative;
  margin: 0;
  padding: 0;
  display: table-cell;
  float: none;
  border-collapse: collapse;
}
.ey-text-content {
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: block;
  text-align: center;
  white-space: nowrap;
}

<div class="ey-nav-bar">
  <ul class="ey-row-scale">

    <div class="ey-col-1">
      <a href="#">
        <li class="ey-col-svg">
          <svg width="100%" class="areaSVG" height="auto" viewBox="0 0 480 360" preserveAspectRatio="xMidYMin slice" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
         M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
         C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" />
            <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
         M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
         C12.787,37.379,11.41,38.895,11.41,38.895z" />
            <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" />
            <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" />
            <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
         M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
         c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
         c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
         c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" />
          </svg>
        </li>
        <li class="ey-text-content">item 1</li>
      </a>
    </div>

    <div class="ey-col-1">
      <a href="#">
        <li class="ey-col-svg">
          <svg width="100%" class="areaSVG" height="auto" viewBox="0 0 480 360" preserveAspectRatio="xMidYMin slice" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
         M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
         C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" />
            <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
         M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
         C12.787,37.379,11.41,38.895,11.41,38.895z" />
            <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" />
            <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" />
            <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
         M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
         c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
         c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
         c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" />
          </svg>

        </li>
        <li class="ey-text-content">Item 2</li>
      </a>
    </div>

    <div class="ey-col-1">
      <a href="#">
        <li class="ey-col-svg">
          <svg width="100%" class="areaSVG" height="auto" viewBox="0 0 480 360" preserveAspectRatio="xMidYMin slice" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
         M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
         C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" />
            <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
         M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
         C12.787,37.379,11.41,38.895,11.41,38.895z" />
            <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" />
            <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" />
            <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
         M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
         c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
         c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
         c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" />
          </svg>
        </li>
        <li class="ey-text-content">item 3</li>
      </a>
    </div>
    <div class="ey-col-1">
      <a href="#">
        <li class="ey-col-svg">
          <svg width="100%" class="areaSVG" height="auto" viewBox="0 0 480 360" preserveAspectRatio="xMidYMin slice" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path id="circle-background" opacity="0.4196" fill="#FFFFFF" enable-background="new    " d="
         M4.193,37.492c0-18.987,15.419-34.38,34.44-34.38c19.021,0,34.439,15.393,34.439,34.38c0,18.987-15.418,34.381-34.439,34.381
         C19.613,71.873,4.193,56.48,4.193,37.492L4.193,37.492z" />
            <path id="sclera" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
         M11.41,38.895c27.619-31.029,41.313-9.542,49.646-2.012c-4.306,6.07-12.69,27.49-46.392,9.919c0,0-5.375-3.548-5.641-4.75
         C12.787,37.379,11.41,38.895,11.41,38.895z" />
            <ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686" />
            <ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449" />
            <path id="eyelid" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" stroke-width="0.25" stroke-miterlimit="8" d="
         M56.955,26.227c5.438,2.787,12.803,9.595,12.803,9.595s-2.338,3.235-5.677,2.588c-4.027,3.396-13.345,29.705-49.417,8.393
         c33.702,17.571,42.086-3.849,46.392-9.919c-8.333-7.53-22.026-29.018-49.646,2.012c0,0-2.94,1.806-4.112-1.456
         c-1.172-3.261,2.481-0.477,4.009-2.911c1.527-2.434,3.674-3.557,7.682-6.792c-4.008,0.646-7.348,3.558-7.348,3.558
         c10.521-10.835,31.379-17.498,53.107-4.205C64.748,27.089,59.404,26.119,56.955,26.227z" />
          </svg>
        </li>
        <li class="ey-text-content">LONGERTEXT</li>
      </a>
    </div>
</div>
</ul>
</div>

【问题讨论】：

标签： html css svg navbar scaling

【解决方案1】：

因此，在这种情况下，我在您的 CSS 中添加了一个 white-space: nowrap;，它将文本保持在一行中。如果您愿意，可以将其保留或取出。

我的第一个建议是使用white-space: nowrap;out（如果你愿意）和font-size：

.ey-text-content {
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: block;
  text-align: center;
  font-size: 95%; /*Add This. Adjust to your liking*/
  **white-space: nowrap;** /*Take Out*/
}

我忘记在.eye-col-1 中包含一个宽度，这导致它超出了它的指导范围。所以在.ey-col-1 你需要添加这个width: 20%; 这样做应该可以解决你所有的文本相关问题。可以看例子here

【讨论】：

请用我的 sn-pt 的代码显示它。 svg 大小问题仍未得到解答。
另外 - 虽然我很感谢你的帮助 - 在你显示的代码笔中，当我最小化窗口时，svg 会变成不同的大小，这是非常不可取的。