首页 文章

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

提问于
浏览 次
31

GOAL:

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

PROBLEM:

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

  • svg的内部内容并不总是在所有屏幕宽度中填充svg元素

  • webkit添加了一个神秘的填充/高度（在这个例子中，填充在svg元素内）SVG元素的高度应该是auto并包装内部svg内容 .

MAIN QUESTION:

Is there a cross browser solution for responsive 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>
html svg responsive-design

4 回答

  • 3

    第一个问题是您将 .svg-wrap div设置为100％高度 . 100％的是什么？在这种情况下，div 's parent element is the body element. When you' ve具有's 100% of the body'高度的块级内容，以及其他流入元素，您总是会有一个垂直滚动条 . 因为你的 .stuff 元素的内容总是100％ . 正如一般的提示，像这样的不断溢出应该是你的css中某些东西不稳定的提示 .

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

    我使用的解决方案涉及intrinsic ratios . 像这样的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 ，或者如果您需要将svg容器的大小调整覆盖回 content-box . DO-能 .

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

    但它并不是Chrome中另一个奇怪的错误，在svg中添加_2446335会产生一种情况，即svg总是调整到最小的渲染大小 . 尝试在Chrome中加载此小提琴：

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

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

    这一点很重要，因为：

    * {max-width:100%}

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

    回复于
  • 7

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

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

    回复于
  • 2

    通过设置 auto 或 0 以外的 height 值，我成功地在Webkit / Gecko浏览器中实现了一致的结果 . 在我的例子中，我使用 1% ，但从我可以告诉它可能是任何东西 . 不知怎的，这解决了Webkit中不正确的高度（从我的测试中我认为 auto 错误地将SVG高度设置为 100% 窗口高度） .

    我还没有在IE中测试过这个 . 如果有效，请告诉我 .

    http://jsfiddle.net/yXeru/

    回复于
  • 22

    我不完全确定你想要达到的效果，但我认为你可能正在寻找preserveAspectRatio =“xMinYMin slice”

    回复于

相关问题