Safari 未将 SVG 呈现为所需 size/height（SVGS 被裁剪）
Safari not rendering SVGs to the desired size/height (SVGS are clipped)
我制作了一些响应式内联 SVG。它们的大小在 Chrome、Firefox 和 Edge 中按照我希望的方式呈现，但在 Safari 中它们逃脱了 containers/are 的截断。由于某种原因，它们的容器无法伸展以容纳它们。以下屏幕截图演示了不需要的、截断的 Safari 渲染：
Safari 中的 SVG 渲染存在已知问题，我已经尽我所能尝试了所有修复方法 (here, here, here, and here)，但我无法解决容器适合 Safari 中的 SVG。部分原因是我的 javascript 有点复杂，而且我还是个初学者，如果我的代码笔有点乱，请原谅我。
这是我的代码笔。 :http://codepen.io/ihatecoding/pen/Bzgqqa
我的 jquery 做了什么：它使 SVG 尽可能大，直到它们占据屏幕高度的 1/3，此时它不会让它们变高。
帮助您专注于重要的事情：
- SVG都是class
.areaSVG
- SVG parents/containers 总是
.ey-col-svg
- 整个页脚是
#indexFooter
- 应该根据登陆页脚的高度调整大小的主要背景图片是
#section0img
当前效果最好的版本具有以下 svg 容器格式：
.ey-col-svg {
display: block;
max-height: calc(30vh - 1vw - 63px);
text-align: center;
box-sizing: content-box;
padding: 0;
margin: -2vh 0 0 0;
}
这是 SVG 的 css，然后 javascript 使它们可见并调整它们的 height:
.areaSVG {
overflow: visible;
display: none;
box-sizing: content-box;
margin: 0;
padding: 1.6vh 0 1vh 0;
}
再次重复我目前实施的 javascript 调整 SVG 的 height（其 class 为 areaSVG）。
这是我的 jQuery 脚本中最相关的部分；它控制 SVG 的大小。正如我上面提到的，此脚本使 SVG 尽可能大，直到它们占据屏幕高度的 1/3，此时它不会让它们变高：
function resizeSVG() {
// the row
var $linksRow = $('.ey-nav-bar');
// the text
var $areaText = $('.ey-text-content');
//the entire row below "research Area"
// the actual svg container
var $area = $('.areaSVG');
var scale = 0.6;
//the wrapper containing the svg div, its height and its width
var $eyCol = $(".ey-col-svg");
var eyWidth = $eyCol.width();
var eyHeight = $eyCol.height();
//the window
var winHeight = $(window).height();
var winWidth = $(window).width();
//max Height caclulated based on window
var maxHeight = .33 * winHeight;
// if the height of the column is less than the width, and below the max height
if (eyHeight < eyWidth && eyHeight < maxHeight)
//make the height of the svg the max heihgt
$area.height(maxHeight);
// use the scaling factor times the width of the svg wrapper
var imageWidth = scale * $eyCol.width();
// get the hight of the column
var imageHeight = $eyCol.height();
// will be the dimensions used to size lenth and width of the svg
var tot;
//apsect ratio of the screen (horizontal/vertical)
var ratio = winWidth / winHeight;
// if the screen is landscape or if the user has left the landing section
tot = imageWidth > imageHeight ? imageHeight: imageWidth;
maxTextHeight = maxHeight * .07;
maxTotHeight = maxHeight * .5;
if (tot < maxTotHeight)
{ $area.css("height", tot);
}
else
{
$area.css("height", maxTotHeight);
$areaText.css("height", maxTextHeight);
}
minLinksHeight = maxHeight * .8;
var linksHeight = $linksRow.height();
}
（注意：生成的 SVG 高度随后被另一个函数（此处未显示）用于控制主图像的大小）。
这是我对每个内联 svg 的介绍性格式化代码：
<svg class="areaSVG notFixed index" viewBox="20 0 37 75" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
非常感谢任何帮助，我真的很想看到它在 Safari 中正确呈现！
您的 SVG 中的 viewBox 属性是错误的。我不确定这是否是您问题的原因，但无论如何您都应该修复它们。
viewBox 应该描述 SVG 中元素的范围。所有 SVG 内容都应该落在 viewBox 的范围内。但是你的没有。 37x75 比内容窄很多。
在下面的示例中，我添加了一个与您的 viewBox 大小相同的 <rect> 元素，因此您可以看到它的比较情况。
/*this is the container for the bottom svg */
.areaSVG {
/* this is the height setting I would like to be a percentage */
/*height: 30%; <------ there*/
overflow: visible;
display: none;
/* margin: 0 26% 0 26%;*/
box-sizing: content-box;
margin: 0;
padding: 1.6vh 0 1vh 0;
/* margin:2vh 0;*/
/* border: 1px solid Yellow;*/
}
#circle-background {
/* filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
Color='#444')";
filter: url(#f1);*/
-moz-filter: box-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
-webkit-filter: box-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
filter: box-shadow(3px 3px 2px rgb(0, 0, 0, 0.5));
fill: Gainsboro;
}
.fillDark {
fill: #939598;
/*DimGray*/
}
.fillWhite {
fill: White;
}
.strokeDark {
stroke: #939598;
/*DimGray*/
}
.strokeWhite {
stroke: White;
}
<svg class="areaSVG fixed" viewBox="20 0 37 75" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="height: 50px; display: inline-block;">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="3" dy="3"></feOffset>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs><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" filter="url(#f1)"></path>
<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"></path>
<ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686"></ellipse>
<ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449"></ellipse>
<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"></path>
<rect x="20" y="0" width="37" height="75" fill="none" stroke="red"/>
</svg>
更好的 viewBox 覆盖眼睛设计及其阴影的方法是：
viewBox="0 0 80 80"
如果您更新所有 SVG，您会得到：
http://codepen.io/anon/pen/KrOVoJ
我不知道它现在是否可以在 Safari 中使用，因为我没有 Mac。
我想出了 CSS 设置的组合，现在可以在 Safari（以及 Chrome、Firefox 和 Edge）中完整呈现 SVG； Safari 不再剪掉 them/cuts 它们。我的尺寸和计算并不完美，但显示设置有效，您需要根据自己的需要调整尺寸，调整 SVG height container/parent。我的 javascript（控制页面的其他方面）很不稳定，但 SVG 设置或多或少是正确的。我希望这可以帮助别人。
这是代码笔：http://codepen.io/ihatecoding/pen/zBgqgp
SVG
的内联html声明
我根据 @Paul Lebeau 的建议调整了我的 viewBox 并删除了我的 overflow: visible 设置 请注意 preserveAspectRatio 是有意未指定的，因为它应该保持默认设置，xMidYMid meet（不像其他 Safari SVG 修复将它更改为 none）。
代码如下：
<svg class="areaSVG notFixed index" viewBox="0 0 80 80" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
CSS
如果您没有使用我的javascript来调整 svg 的大小，请对 SVG 容器使用以下 css 设置（.ey-col-svg ) 和 SVG 本身 (.areaSVG):
/* the SVG parent/container */
.ey-col.svg {
display: block;
height: auto;
text-align: center;
box-sizing: border-box;
padding: 0;
}
/* the SVG itself */
.areaSVG {
display: inline-block;
max-height: 15vh;
box-sizing: content-box;
margin: 0;
}
关于我的笔记 javascript
如果您正在使用我的凌乱 javascript，请注意 容器和 SVG 最初都会在 CSS，然后 javascript 会将它们都更改为具有我上面显示的相同显示设置 [容器 (.ey-col-svg) 设置为 display: block 和 SVG (.areaSVG) 设置为 display: inline-block]。
此外，我的 codepen 中的 javascript 已更改。现在，如果我调整容器 (.ey-col-svg) 的 height 而不是 SVG (.areaSVG) 本身的 height，效果会更好。另一个可能对用户更好的选择是更改容器的 max-height，而不是 height（就像我所做的那样）。
我制作了一些响应式内联 SVG。它们的大小在 Chrome、Firefox 和 Edge 中按照我希望的方式呈现，但在 Safari 中它们逃脱了 containers/are 的截断。由于某种原因，它们的容器无法伸展以容纳它们。以下屏幕截图演示了不需要的、截断的 Safari 渲染：
Safari 中的 SVG 渲染存在已知问题，我已经尽我所能尝试了所有修复方法 (here, here, here, and here)，但我无法解决容器适合 Safari 中的 SVG。部分原因是我的 javascript 有点复杂，而且我还是个初学者，如果我的代码笔有点乱，请原谅我。
这是我的代码笔。 :http://codepen.io/ihatecoding/pen/Bzgqqa
我的 jquery 做了什么：它使 SVG 尽可能大，直到它们占据屏幕高度的 1/3，此时它不会让它们变高。
帮助您专注于重要的事情：
- SVG都是class
.areaSVG - SVG parents/containers 总是
.ey-col-svg - 整个页脚是
#indexFooter - 应该根据登陆页脚的高度调整大小的主要背景图片是
#section0img
当前效果最好的版本具有以下 svg 容器格式：
.ey-col-svg {
display: block;
max-height: calc(30vh - 1vw - 63px);
text-align: center;
box-sizing: content-box;
padding: 0;
margin: -2vh 0 0 0;
}
这是 SVG 的 css，然后 javascript 使它们可见并调整它们的 height:
.areaSVG {
overflow: visible;
display: none;
box-sizing: content-box;
margin: 0;
padding: 1.6vh 0 1vh 0;
}
再次重复我目前实施的 javascript 调整 SVG 的 height（其 class 为 areaSVG）。
这是我的 jQuery 脚本中最相关的部分；它控制 SVG 的大小。正如我上面提到的，此脚本使 SVG 尽可能大，直到它们占据屏幕高度的 1/3，此时它不会让它们变高：
function resizeSVG() {
// the row
var $linksRow = $('.ey-nav-bar');
// the text
var $areaText = $('.ey-text-content');
//the entire row below "research Area"
// the actual svg container
var $area = $('.areaSVG');
var scale = 0.6;
//the wrapper containing the svg div, its height and its width
var $eyCol = $(".ey-col-svg");
var eyWidth = $eyCol.width();
var eyHeight = $eyCol.height();
//the window
var winHeight = $(window).height();
var winWidth = $(window).width();
//max Height caclulated based on window
var maxHeight = .33 * winHeight;
// if the height of the column is less than the width, and below the max height
if (eyHeight < eyWidth && eyHeight < maxHeight)
//make the height of the svg the max heihgt
$area.height(maxHeight);
// use the scaling factor times the width of the svg wrapper
var imageWidth = scale * $eyCol.width();
// get the hight of the column
var imageHeight = $eyCol.height();
// will be the dimensions used to size lenth and width of the svg
var tot;
//apsect ratio of the screen (horizontal/vertical)
var ratio = winWidth / winHeight;
// if the screen is landscape or if the user has left the landing section
tot = imageWidth > imageHeight ? imageHeight: imageWidth;
maxTextHeight = maxHeight * .07;
maxTotHeight = maxHeight * .5;
if (tot < maxTotHeight)
{ $area.css("height", tot);
}
else
{
$area.css("height", maxTotHeight);
$areaText.css("height", maxTextHeight);
}
minLinksHeight = maxHeight * .8;
var linksHeight = $linksRow.height();
}
（注意：生成的 SVG 高度随后被另一个函数（此处未显示）用于控制主图像的大小）。
这是我对每个内联 svg 的介绍性格式化代码：
<svg class="areaSVG notFixed index" viewBox="20 0 37 75" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
非常感谢任何帮助，我真的很想看到它在 Safari 中正确呈现！
您的 SVG 中的 viewBox 属性是错误的。我不确定这是否是您问题的原因，但无论如何您都应该修复它们。
viewBox 应该描述 SVG 中元素的范围。所有 SVG 内容都应该落在 viewBox 的范围内。但是你的没有。 37x75 比内容窄很多。
在下面的示例中，我添加了一个与您的 viewBox 大小相同的 <rect> 元素，因此您可以看到它的比较情况。
/*this is the container for the bottom svg */
.areaSVG {
/* this is the height setting I would like to be a percentage */
/*height: 30%; <------ there*/
overflow: visible;
display: none;
/* margin: 0 26% 0 26%;*/
box-sizing: content-box;
margin: 0;
padding: 1.6vh 0 1vh 0;
/* margin:2vh 0;*/
/* border: 1px solid Yellow;*/
}
#circle-background {
/* filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
Color='#444')";
filter: url(#f1);*/
-moz-filter: box-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
-webkit-filter: box-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
filter: box-shadow(3px 3px 2px rgb(0, 0, 0, 0.5));
fill: Gainsboro;
}
.fillDark {
fill: #939598;
/*DimGray*/
}
.fillWhite {
fill: White;
}
.strokeDark {
stroke: #939598;
/*DimGray*/
}
.strokeWhite {
stroke: White;
}
<svg class="areaSVG fixed" viewBox="20 0 37 75" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="height: 50px; display: inline-block;">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="3" dy="3"></feOffset>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs><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" filter="url(#f1)"></path>
<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"></path>
<ellipse id="iris" class="fillDark" fill-rule="evenodd" clip-rule="evenodd" cx="38.196" cy="36.63" rx="16.202" ry="15.686"></ellipse>
<ellipse id="pupil" class="fillWhite" fill-rule="evenodd" clip-rule="evenodd" cx="38.529" cy="36.954" rx="5.628" ry="5.449"></ellipse>
<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"></path>
<rect x="20" y="0" width="37" height="75" fill="none" stroke="red"/>
</svg>
更好的 viewBox 覆盖眼睛设计及其阴影的方法是：
viewBox="0 0 80 80"
如果您更新所有 SVG，您会得到：
http://codepen.io/anon/pen/KrOVoJ
我不知道它现在是否可以在 Safari 中使用，因为我没有 Mac。
我想出了 CSS 设置的组合，现在可以在 Safari（以及 Chrome、Firefox 和 Edge）中完整呈现 SVG； Safari 不再剪掉 them/cuts 它们。我的尺寸和计算并不完美，但显示设置有效，您需要根据自己的需要调整尺寸，调整 SVG height container/parent。我的 javascript（控制页面的其他方面）很不稳定，但 SVG 设置或多或少是正确的。我希望这可以帮助别人。
这是代码笔：http://codepen.io/ihatecoding/pen/zBgqgp
SVG
的内联html声明我根据 @Paul Lebeau 的建议调整了我的 viewBox 并删除了我的 overflow: visible 设置 请注意 preserveAspectRatio 是有意未指定的，因为它应该保持默认设置，xMidYMid meet（不像其他 Safari SVG 修复将它更改为 none）。
代码如下：
<svg class="areaSVG notFixed index" viewBox="0 0 80 80" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
CSS
如果您没有使用我的javascript来调整 svg 的大小，请对 SVG 容器使用以下 css 设置（.ey-col-svg ) 和 SVG 本身 (.areaSVG):
/* the SVG parent/container */
.ey-col.svg {
display: block;
height: auto;
text-align: center;
box-sizing: border-box;
padding: 0;
}
/* the SVG itself */
.areaSVG {
display: inline-block;
max-height: 15vh;
box-sizing: content-box;
margin: 0;
}
关于我的笔记 javascript
如果您正在使用我的凌乱 javascript，请注意 容器和 SVG 最初都会在 CSS，然后 javascript 会将它们都更改为具有我上面显示的相同显示设置 [容器 (.ey-col-svg) 设置为 display: block 和 SVG (.areaSVG) 设置为 display: inline-block]。
此外，我的 codepen 中的 javascript 已更改。现在，如果我调整容器 (.ey-col-svg) 的 height 而不是 SVG (.areaSVG) 本身的 height，效果会更好。另一个可能对用户更好的选择是更改容器的 max-height，而不是 height（就像我所做的那样）。