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

时间：2016-04-18 16:39:05

标签： html css svg height scaling

我有一个包含一行缩放SVG按钮的页脚，除了一件事我非常满意：我无法将svgs的高度扩展到其容器的某个百分比（例如30％）在我的页脚中。我已经尝试了几天，但我无法弄清楚为什么。

如果我使用固定大小（例如像素），那么高度排序可以达到我想要的效果，但它并不像我喜欢的那样响应。也许我还没有理解svgs的一些东西。我真的希望svg div基于其容器高度的相对百分比。

提前致谢！

这是codepen：http://codepen.io/ihatecoding/pen/KzRQWO

这是片段：

＆＃13;
＆＃13; 
#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;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

当您将SVG设置为height: 30%时，这意味着其父级高度的30％。该父级是<div>，没有明确的高度。 <div>从孩子身上获得了它的高度。它唯一的孩子是SVG。所以浏览器没有可靠的信息来确定“30％”的高度应该是什么意思。

为了使“30％”工作，必须将某些东西设置为某个固定或可推导的高度。

答案 1 :(得分：1)

要澄清Paul LeBeau的答案：

您的SVG设置为height: 30%，表示“父div的30％”。

父div是<div class="ey-col-svg">。

.ey-col-svg的css定义不包含height语句。

如果您将height: 100%添加到.ey-col.svg的CSS中，那么您的SVG将按照CSS规则填充其父div高度的30％。不需要Javascript。

答案 2 :(得分：0)

With a lot of help, I was able make this javascript solution. I hope this helps anyone who wants to get a row of svgs that are fully responsive to the height and width of the screen. Note that because the text in the footer containing the SVGs is not completely responsive to height, the svgs disappear at the smallest media heights. If you want it fully responsive, you should make the text divs height-dependent.

Here is the codepen: http://codepen.io/ihatecoding/pen/vGrVQd

Here is the snippet: 

$(document).ready(scaleSVG);
$(window).on('resize', scaleSVG);

function scaleSVG() {
  var scale = 0.9;
  var $eyCol = $(".ey-col-svg");
  var eyWidth = $eyCol.width();
  var eyHeight = $eyCol.height();
  var maxHeight = .4 * $(window).height();

  if(eyHeight < eyWidth && eyHeight < maxHeight)
    $(".areaSVG").height(maxHeight);

  var imageWidth = scale * $eyCol.width();
  var imageHeight = $eyCol.height();
  var tot = imageWidth > imageHeight ? imageHeight : imageWidth;
  //var imageHeight = 0.5*$(".ey-col-svg").height();

  $(".areaSVG").css("width", tot);
  $(".areaSVG").css("height", tot);
};
#footer {
  text-align: center;
  position: fixed;
  vertical-align: middle;
  bottom: 0;
  left: 0;
  z-index: 5000;
  width: 100%;
  max-height: 40vh;
}

.areaSVG {
  /* this is the height setting I wanted to be  a percentage */
  /*height: 30%; <------ there*/
  overflow: visible;
  box-sizing: content-box;
  backgroud-color: Grey;
}

.ey-col-svg {
  display: block;
  height: calc(100% - 30px);
  max-height: calc(40vh - 2vw - 63px);
  padding: 0 0;
  margin:0;
  text-align: center;
  background-color: Red;
}

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

.ey-row-scale {
  text-align: center;
  padding-left: 2.5%;
  padding-right: 2.5%;
  display: block;
  background-color: Orange;
  max-width: 95%;
  height: calc(100% - 28px);
  overflow: hidden;
}

.ey-col-1 {
  text-align: center;
  background-color: Green;
  width: 20%;
  height: 100%;
  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;
  height: calc(2vw + 5px);
  line-height: calc(2vw + 5px);
  color: black;
  z-index: 10000;
}

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

#content {
  font-size: 2vw;
}




.fillDark{fill:DimGray;}
.fillWhite{fill:White;}
.strokeDark{stroke:DimGray;}
.strokeWhite{stroke:White;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<div id="content">
  <p>Javascript solution to scaling svgs.  This isn't perfect.  At the very smallest heights the SVGs disappear (because the text isn't scaling in response to hight). But, with a bit of work you can customize this to your needs.</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"    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" 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" 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" 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>

相关问题
最新问题