38

目标：

我正在尝试获取一个INLINE SVG元素来填充父元素的全部可用宽度。我可以使用imgandobject标记轻松实现相同的效果来引用 svg 文件，但我想使用inline svg，因为我正在使用 javascript 为 svg 内部元素设置动画。

问题：

我可以在 Firefox 中实现这一点，也可以在 Chrome 中进行一些调整，但是 safari 和 IE9 和 IE10 不会发挥作用。

  • svg 的内部内容并不总是在所有屏幕宽度中填充 svg 元素
  • webkit 添加了一个神秘的 padding/height （在这个例子中，padding 在 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>
4

5 回答 5

25

第一个问题是您将.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全局使用星形选择器，或者如果您需要将 box-sizing 覆盖回content-box您的 svg 容器。可以的。

作为旁注，这显然不是事情应该如何工作的方式。浏览器应该足够聪明，可以查看 SVG viewBox 属性以获取比例，计算计算宽度（在任何 maxWidth 限制之后），然后计算高度。

但它目前不是这样工作的。Chrome 中还有一个奇怪的错误，即添加max-width:100%到 svg 会导致 svg 始终调整为最小渲染大小。尝试在 Chrome 中加载这个小提琴：

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

你根本看不到 SVG！诡异的。更奇怪的是，在开发工具中关闭max-width声明，然后开始在 jsfiddle 中使用“结果”视口的宽度。让它稍微变窄，然后变宽，然后变窄，然后变宽。请注意，一旦 svg 变小，当视口变大时，它不会再次重新调整大小！

这一点很重要，因为：

 * {max-width:100%}

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

于 2013-07-12T20:18:26.320 回答
9

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

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

于 2013-05-31T12:07:54.277 回答
3

通过设置除or以外的height值，我设法在 Webkit/Gecko 浏览器中实现了一致的结果。在我的示例中，我使用，但据我所知，它可能是任何东西。不知何故，这解决了 Webkit 中不正确的高度（根据我的测试，我认为错误地将 SVG 高度设置为窗口高度）。auto01%auto100%

我还没有在 IE 中测试过这个。请让我知道它是否有效。

http://jsfiddle.net/yXeru/

于 2013-09-22T11:40:46.127 回答
3

我不完全确定您要达到什么效果，但我认为您可能正在寻找 preserveAspectRatio ="xMinYMin slice"

于 2013-06-09T23:15:11.737 回答
1

经过一番折腾，我使用的现代浏览器和IE11 兼容解决方案分为两部分：

  1. 在 svg 根标签中同时指定viewBox和。preserveAspectRatio="xMinYMin meet"
  2. 使用 css 媒体查询为您的 svg 元素vw提供每个布局的高度（以单位为单位）。

祝你好运！

于 2019-05-31T00:10:28.810 回答