Question

我有一些响应内联SVG。它们的大小可以在Chrome，Firefox和Edge中呈现，但在Safari中，它们可以逃脱容器/被切断。由于某种原因，他们的容器不会拉伸以容纳它们。以下屏幕截图演示了不需要的，截止的Safari渲染：

Safari中存在SVG渲染的已知问题，我已经尝试了尽我所能找到的所有修复程序（here，here，here，和here），但我无法使容器适合Safari中的SVG。这部分是因为我的javascript事情有点复杂而且我还是初学者，请原谅我，如果我的codepen有点乱。

这是我的代码。：http://codepen.io/ihatecoding/pen/Bzgqqa

我的jquery做了什么：它使SVG尽可能大，直到它们占据屏幕高度的1/3，此时它不会让它们变得更高。

帮助您专注于重要事项：

SVG全部是.areaSVG
SVG父母/容器始终为.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;
}

在javascript使其可见并调整其height之前，这是SVG的CSS：

.areaSVG {
    overflow: visible;
    display: none;
    box-sizing: content-box;
    margin: 0;
    padding: 1.6vh 0 1vh 0;
}

再次重复我目前实施的javascript会调整SVG的height（其类为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中正确呈现！

Answer 1

我找到了CSS设置的组合，现在可以在Safari（以及Chrome，Firefox和Edge）中完整地渲染SVG; Safari不再剪辑它们/剪掉它们。我的大小和计算并不完美，但显示设置有效，您需要根据自己的需要调整大小，调整SVG容器/父级的height。我的javascript（控制页面的其他方面）很不稳定，但SVG设置或多或少是正确的。我希望这可以帮助别人。

以下是codepen：http://codepen.io/ihatecoding/pen/zBgqgp

SVG的内联html声明

我根据viewBox 的建议调整了我的overflow: visible并删除了我的@Paul Lebeau设置请注意，preserveAspectRatio有意未指定，因为它应保留默认设置xMidYMid meet（与将其更改为none的其他Safari SVG修补程序不同。）

以下是代码：

 <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来调整svgs的大小，请对SVG容器（.ey-col-svg）和SVG本身（.areaSVG）使用以下css设置：

/* 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中设置display: none ，然后javascript将更改它们使用上面显示的相同显示设置[将容器（.ey-col-svg）设置为display: block，将SVG（.areaSVG）设置为display: inline-block]。

此外，我的codepen中的javascript已更改。如果我调整容器height（.ey-col-svg）而不是SVG（.areaSVG）本身，它现在会更好。另一个可能更适合用户的选项是更改容器的max-height，而不是height（正如我所做的那样）。

Answer 2

SVG中的viewBox属性错误。我不确定这是否是你问题的原因，但无论如何你应该修复它们。

viewBox应该描述SVG中元素的范围。所有SVG内容都应该在viewBox的范围内。但你的并不是。在37x75，它比内容窄很多。

在以下示例中，我添加了与<rect>大小相同的viewBox元素，以便您了解它的比较结果。

＆＃13;

/*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;
}

＆＃13;

<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>

＆＃13;

覆盖眼睛设计及其阴影的更好viewBox将是：

viewBox="0 0 80 80"

如果你更新了所有SVG，你就会得到这个：

http://codepen.io/anon/pen/KrOVoJ＆＃34;

我无法判断它现在是否适用于Safari，因为我没有Mac。

Safari不能将SVG渲染到所需的大小/高度（SVGS被剪裁）

2 个答案: