响应INLINE SVG - svg的内容必须填充父宽度

Question

目标:

我试图获得一个INLINE SVG元素来填充父元素的完整可用宽度.我可以使用img和object标签来轻松地实现相同的效果来引用svg文件,但我想使用,inline svg因为我使用javascript动画svg内部元素.

问题:

我可以在Firefox中实现这一点,并且在Chrome中也有一些调整,但safari和IE9和IE10将无法​​播放.

• svg的内部内容并不总是在所有屏幕宽度中填充svg元素
• webkit添加了一个神秘的填充/高度(在这个例子中,填充在svg元素内)SVG元素的高度应该是auto并包装内部svg内容.

主要问题:

是否有响应式INLINE SVG的跨浏览器解决方案:查看IE9&10和-webkit-Safari中的示例,并注意SVG元素中不需要的额外高度(青色).

http://jsfiddle.net/David_Knowles/9tUAd/

<div class="block">stuff</div> 
<div class="wrap">
    <svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 550 350" xml:space="preserve" preserveAspectRatio="xMinYMin meet">

        <rect x="0" y="0" width="550" height="350"/>
        <polyline points="0,0 0,350 550,350"/>
        <text x="0" y="50%" fill="#ffffff" stroke="none" width="100%">The text</text>
    </svg>
</div>
<div class="block">stuff</div> 

Answer 1

第一个问题是你将.svg-wrapdiv 设置为100%高度.100%的是什么？在这种情况下,div的父元素是body元素.当你的块级内容是身体高度的100%,以及其他流入元素时,你总是会有一个垂直的滚动条.因为你的内容总是100%+你的.stuff元素.正如一般的提示,像这样的不断溢出应该是你的css中某些东西不稳定的提示.

继续深入DOM,svg元素的100%高度声明强制svg扩展到过高的包装器.这是罪魁祸首的另一部分.

我使用的解决方案涉及内在比率.像这样的CSS:

.svg-wrap {
    background-color:red;
    height:0;
    padding-top:63.63%; /* 350px/550px */
    position: relative;
}

svg {
    background-color: cyan;
    height: 100%;
    display:block;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
}

http://jsfiddle.net/pcEjd/

测试了最新的FF,Chrome,Safari,(虽然不是IE).

这种方法的缺点是:

a)你必须预先计算所有盒子的比例,或者写一个这样做的脚本.还不错.

b)您不能border-box全局使用星号选择器,或者如果您需要将盒子大小重写content-box为svg容器.DO-能.

作为旁注,这显然不是事情应该如何运作.浏览器应足够智能,以查看SVG viewBox属性以获取比例,计算计算宽度(在任何maxWidth限制之后),然后计算高度.

但它目前没有这种方式.Chrome中还有另一个奇怪的错误,即添加max-width:100%到svg会导致svg总是调整到最小的渲染大小.尝试在Chrome中加载此小提琴:

http://jsfiddle.net/ynmey/1/

你根本看不到SVG!奇怪的.甚至更奇怪,max-width在Dev Tools中切换声明,然后在jsfiddle中开始使用"result"视口的宽度.稍微窄一点,然后更宽,然后更窄,然后更宽.请注意,一旦svg被轻微缩小,当视口变大时,它不会再次调整大小!

这一点很重要,因为:

 * {max-width:100%}

是一种常见的(并且完全合法的)响应式设计方法,它目前在Blink中对SVG造成严重破坏.所以现在坚持内在比率.

Answer 2

内联 SVG元素的默认显示类型是display: inline;.这意味着SVG元素被放置在其父级的印刷基线上并相应地对齐.基线下方总有一些空间允许悬空的字符,如g和j等.

轻松修复:svg { display: block;}或svg { display: inline-block; vertical-align: top; }.