HTML IE 中的内嵌 SVG 边距

Question

我有这个html

<div class="foot">
  <svg version="1.1" id="svgfooter" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 300 91">
    <polygon id="svgpolygon" fill="#017EFF" points="0,0 300,0 300,71 150,91 0,71 "/>
  </svg>
  <div class="title">
    TEST
  </div>
</div>

与以下css

.foot {
  position:relative;
  background: #999999;
  width:350px;
}
#svgfooter {
  display:block;
  margin:0px;
  padding:0px;
  width:350px;
}
#svgpolygon {
  display:block;
  margin:0px;
}
.title {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  line-height:90px;
  height:90px;
  color: #ffffff;
  text-align: center;
  font-size:24px;
}

我想通过将相关 div 绝对定位在 SVG 上来将 TEST 文本定位在 SVG 上。整个 shabang 应该是有响应的。到目前为止一切顺利，它在 Firefix、Chrome 和 Safari 中完美运行，但在 IE 中不完美。

IE 显示 SVG 的顶部和底部边距很大。标题位置很好。我无法删除这些边距。

这里有什么问题？不能用IE完成吗？

Codepen

Answer 1

我相信 IE 有解决此问题的方法，但我不记得是什么方法了。这里有人会知道的。

同时，您可以在 <svg> 上设置 preserveAspectRatio="xMidYMin meet" 来缓解此问题。至少它会与 <div>.

的顶部对齐

Answer 2

preserveAspectRatio="xMidYMin meet" 是默认值，通常不需要，...虽然 IE 有一些坏习惯，但这并没有解决我的问题，也没有从我原来的 SVG 中删除高度和宽度无论如何。

我最近运行的是 IE 10/11 没有缩放 SVG 以适应它的容器，它会选择它自己的默认高度，这就是渲染大小，其他浏览器都很好设置：

svg{width:100%}

但是 IE 铁石心肠。我的用例很奇怪，...可能并不适合所有人，这是序言。

IE 10以下的我不在乎，让魔鬼吃到最后
我使用了很多 SVG 文件并且完全内联。但我可能事先知道也可能不知道，但它们都包含在一个 div 中。所以，我需要一个通用的解决方案，而不是一个特定的解决方案。
一切都必须响应。

所以，我制作了这个小 jquery 脚本和 CSS 规则，到目前为止它正在做我需要的事情：

.svgfix{height:0 !important;position:relative !important;}

$(function(){
    if(!!navigator.userAgent.match(/Trident\/7\./)){
        $('svg').each(function(e){
            var box = $(this)[0].getAttribute('viewBox').split(' ');
            var con = $(this).parent();
            con.addClass('svgfix').css('padding-top', ((con.width() / box[2]) * box[3])+'px');
            $(this).css({'position':'absolute','top':'0','left':'0'});
        });
    }
});

基本上，一个相当小的 CSS class 其大小我可以容忍作为静态规则。 Jquery 检查 IE，然后遍历 SVG 文件，获取 viewBox 尺寸以根据其父容器保留纵横比。一点代数，然后将高度应用为来自这篇优秀文章中解释的 hack 的填充：

http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

基本上，破解方法是折叠父项的高度，并改用填充。并设置相对和绝对位置。我的数学最终有点不同，我用像素而不是百分比。这可能是我要重新审视的东西，......但它在星期五让我的面包从火中解救出来并且到目前为止效果很好。

最后，...您的应用程序可能不需要 !important；对于我的，我确实需要为这种特殊情况覆盖现有规则。 SVG 样式可能也应该是 class，...但在我的情况下，我无法将 class 添加到系统范围内的每个 SVG，..它再次处理边缘情况，所以我咬紧牙关。

无论如何，我在这个问题上浪费了很多时间，希望这对您有所帮助，并且非常欢迎任何改进此解决方案的注释。

Answer 3

幽灵控制着 adobe illustrator 和 inkscape 以及 contrariness svg 开发人员背后的 svg 设计世界，如果树根耐心等待。

所以强烈建议大家在illustrator或inkscape中从头开始设计，不要相互交换。

我更喜欢 inkscape 因为 inkscape 内部支持 svg 效果。

尽管在容器元素上使用 padding-bottom hack，但 IE 中的额外填充区域是第一步设计错误的结果。

始终在 adobe illustrator 或 inkscape 中打开您的设计（也许您将位图徽标跟踪到矢量路径）文件 (mysample.svg) 和 ctrl+n 然后从 svg 文件中剪切 svg 形状并将它们粘贴到新创建的文件。然后 select 在插图画家中：object> 画板 > 适合艺术字边界

或在 inkscape select 中：编辑此文档的属性>并从自定义大小区域 select 按钮标题：将页面大小调整为绘图或 selection

HTML IE 中的内嵌 SVG 边距

HTML inline SVG margins in IE

html

css

internet-explorer

svg