html - 强制 SVG 根据百分比高度调整大小

Question

我有一个包含一行缩放 SVG 按钮的页脚，除了一件事我非常满意:我无法让 svg 的高度缩放到它们容器的某个百分比(例如 30% ) 在我的页脚中。 我已经尝试了好几天，但我不知道为什么。

如果我使用固定大小(例如，以像素为单位)，高度会满足我的要求，但它不会以我想要的方式响应。也许我还不了解 svgs。我真的希望 svg div 基于其容器高度的相对百分比。

提前致谢!

这是代码笔:http://codepen.io/ihatecoding/pen/KzRQWO

这是片段:

#footer {
  text-align: center;
  position: fixed;
  vertical-align: middle;
  bottom: 0;
  left: 0;
  z-index: 5000;
  width: 100%;
  max-height:40% !important;

}

.areaSVG {
  width: auto;
  
  /* this is the height setting I would like to be a percentage */
  height: 60px;  /* <------ there*/
  
  overflow: visible;
  margin: 0 26% 0 26%;
  box-sizing: content-box;
  backgroud-color: Grey;
}

.ey-col-svg {
  display: block;
  margin: 10% 20% 10% 20%;
  text-align: center;
  background-color: Red;
}

.ey-nav-bar {
  background-color: MediumVioletRed ! important;
  width: 100% !important;
  overflow: hidden;
  text-align: center;
  height: auto;
}

.ey-row-scale {
  text-align: center;
  padding-left: 5%;
  padding-right: 5%;
  display: block;
  background-color: Orange;
  max-width: 90%;
  overflow: hidden;
}

.ey-col-1 {
  text-align: center;
  background-color: Green;
  width: 24%;
  margin: 0;
  padding: 0;
  display: inline-block;
  border-collapse: collapse;
}

.ey-text-content {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: block;
  text-align: center;
  white-space: nowrap;
  font-size: 2vw;
  color: black;
  z-index: 10000;
}

#linkTextCell {
  text-align: center;
  width: 100%;
  vertical-align: middle;
  font-size: 150%;
  display: block;
  color: White;
  background-color: Blue;
}

#content {font-size: 2vw;}

<div id="content">
  <p>I am happy with this row of scaling svgs, except for one thing - I want the height of the svgs (class "areaSVG" ) to be fixed 30%, but I can't get it to stick. It sort of behaves as I wnat if I set a fixed pixel, but I would really love it if the height could be percentage based. If you know about svgs, perhaps you can figure out a way to do this?</p>
  
</div>
  








<div id="footer">

<div id="linkTextCell" class="navText hideRow">
  Links:
</div>



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


      <div class="ey-col-1">
        <a class = "eSVG areaAnchor" href="#">

   <div class="ey-col-svg">


     <svg  class="areaSVG" viewBox="20 0 37 73" 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>

   </div>

   <div class="ey-text-content navText">Link 1</div>
 </a>

 </div>

 
      <div class="ey-col-1">
        <a class = "sSVG areaAnchor" href="#">

        <div class="ey-col-svg">
        <svg  class="areaSVG" viewBox="20 0 37 73" 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>     </div>

           <div class="ey-text-content navText">Link 2</div>

         </a>

      </div>

      <a class = "wSVG areaAnchor"  href="#">

      <div class="ey-col-1">

        <div class="ey-col-svg">
        <svg  class="areaSVG" viewBox="20 0 37 73" 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>
          </div>
        <div class="ey-text-content navText">Link 3</div>

    </div>
  </a>


      <div class="ey-col-1">
        <a class = "nSVG areaAnchor" href="#">

        <div class="ey-col-svg">
        <svg  class="areaSVG" viewBox="20 0 37 73" 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>
           </div>

        <div class="ey-text-content navText">Link 4</div>
      </a>

  </div>

    </div>
    </div>


</div>

Answer 1

当您将 SVG 设置为 height: 30% 时，这意味着其父级高度的 30%。那个 parent 是<div>没有明确的高度。 <div>从它的 child 那里得到它的高度。它唯一的 child 是 SVG。因此，浏览器没有可靠的信息可以继续确定“30%”的高度实际上意味着什么。

为了让“30%”起作用，必须将某些东西设置为某个固定或可推导的高度。