强制 SVG 根据百分比高度调整大小
Forcing an SVG to resize based on percentage height
我有一个包含一行缩放 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>
当您将 SVG 设置为 height: 30% 时，这意味着其 parent 高度的 30%。 parent 是没有明确高度的 <div>。 <div> 从它的 children 得到它的高度。只有 child 是 SVG。所以浏览器没有可靠的信息可以继续确定“30%”的高度实际上应该意味着什么。
为了让“30%”起作用，必须将某些东西设置为某个固定或可推导的高度。
在很多帮助下，我能够做出这个 javascript 解决方案。我希望这可以帮助任何想要获得一行完全响应屏幕高度和宽度的 svg 的人。请注意，由于包含 SVG 的页脚中的文本不完全响应高度，因此 svg 在最小媒体高度处消失。如果你想让它完全响应，你应该使文本 div 高度相关。
这是代码笔：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>
澄清 Paul LeBeau 的回答：
您的 SVG 设置为 height: 30%，这意味着“父 div 的 30%”。
父 div 是 <div class="ey-col-svg">。
.ey-col-svg 的 css 定义不包含身高声明。
如果您将 height: 100% 添加到 .ey-col.svg 的 css，那么您的 SVG 将填充其父级 div 高度的 30%，根据 CSS规则。不需要 Javascript。
我有一个包含一行缩放 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>
当您将 SVG 设置为 height: 30% 时，这意味着其 parent 高度的 30%。 parent 是没有明确高度的 <div>。 <div> 从它的 children 得到它的高度。只有 child 是 SVG。所以浏览器没有可靠的信息可以继续确定“30%”的高度实际上应该意味着什么。
为了让“30%”起作用，必须将某些东西设置为某个固定或可推导的高度。
在很多帮助下，我能够做出这个 javascript 解决方案。我希望这可以帮助任何想要获得一行完全响应屏幕高度和宽度的 svg 的人。请注意，由于包含 SVG 的页脚中的文本不完全响应高度，因此 svg 在最小媒体高度处消失。如果你想让它完全响应，你应该使文本 div 高度相关。
这是代码笔：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>
澄清 Paul LeBeau 的回答：
您的 SVG 设置为 height: 30%，这意味着“父 div 的 30%”。
父 div 是 <div class="ey-col-svg">。
.ey-col-svg 的 css 定义不包含身高声明。
如果您将 height: 100% 添加到 .ey-col.svg 的 css，那么您的 SVG 将填充其父级 div 高度的 30%，根据 CSS规则。不需要 Javascript。