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

问题描述 投票：0回答：3

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

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

提前致谢！

这是codepen：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>
html css svg height scaling
3个回答
1
投票

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

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

1
投票

澄清Paul LeBeau的答案：

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

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

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

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

0
投票

在很多帮助下，我能够制作这个javascript解决方案。我希望这可以帮助任何想要获得一系列完全响应屏幕高度和宽度的svgs的人。请注意，因为包含SVG的页脚中的文本不能完全响应高度，所以svgs会在最小的媒体高度处消失。如果你想要它完全响应，你应该使文本div高度相关。

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

这是片段：

$(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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.