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有这个问题的解决方法，但我不记得它是什么。这里有人会知道。

与此同时，您可以通过preserveAspectRatio="xMidYMin meet"设置<svg>来缓解此问题。至少它会与<div>的顶部对齐。

Answer 2

preserveAspectRatio =＆＃34; xMidYMin meet＆＃34;是一个默认的，通常不需要，...虽然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类，其大小我可以容忍作为静态规则。 Jquery检查IE，然后遍历SVG文件，获取viewBox维度以根据它的父容器保留纵横比。一些代数，然后将高度作为这篇优秀文章中解释的黑客的填充：

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

基本上黑客攻击是为了折叠父亲的身高，而是使用填充。并设置相对和绝对位置。我的数学结果有点不同，我用像素代替百分比。这可能是我需要重新审视的事情......但是它在星期五让我的小圆面包出了火，并且到目前为止效果还不错。

最后，......重要的可能不适合您的申请;与我的一起，我确实需要为这个例外情况覆盖现有规则。 SVG风格应该也可以是一个类，但是在我的情况下，我无法将该类添加到系统范围内的每个SVG中，而且它再次处理一个边缘情况，所以我咬紧牙关。

无论如何，我在这个问题上失去了很多时间，希望这会有所帮助，并且非常欢迎任何改进此解决方案的说明。

Answer 3

幽灵控制着adobe illustrator背后的svg设计世界，如果树的根有耐心，那就是inkscape和反对svg开发人员。

所以强烈建议您在插图画家或inkscape中从头开始设计，不要在它们之间进行交换。

我更喜欢inkscape中支持的svg效果。

IE中的额外填充区域尽管在容器元素上使用填充底部黑客是第一步设计错误的结果。

总是在打开你的设计（也许你跟踪一个位图徽标到矢量路径）文件（mysample.svg）adobe illustrator或inkscape和ctrl + n然后从svg文件中剪切svg形状并将它们粘贴到新创建的文件中。然后在插画家中选择：对象＆gt;画板＆gt;适合artword界限

或在inkscape中选择：编辑此文档的属性＆gt;并从自定义尺寸区域选择按钮标题：将页面调整为绘图或选择

IE中的HTML内联SVG边距

3 个答案: