表格中的 SVG 在 Internet Explorer 中不缩放答案

【问题标题】：SVG in a table not scaling in Internet Explorer表格中的 SVG 在 Internet Explorer 中不缩放
【发布时间】：2014-12-06 15:27:24
【问题描述】：

我正在尝试使用表格中的一些图像制作或多或少的响应式布局。所以我想我应该使用 SVG，现在除了 Internet Explorer 之外，一切都很好：我在 td 元素中有一个内联 SVG，如果 SVG 根据父元素重新调整大小会很好。无论我尝试什么，我都无法将其存档。一个简化的例子在这里：

HTML

<table id="F">
    <tr>
        <td class="container">
            <svg id="bar-graph" viewBox="0 0 100 100" preserveAspectRatio="none">
                        <rect height="100" width="100"></rect>
            </svg>
        </td>
        <td class="container" style="background-color:red;"></td>
    </tr>
</table>

CSS

.container {
    width:50%;
}
#bar-graph {
    height:100%;
    width:100%;
}
#F {
    width:50px;
}

这是小提琴中的示例： http://jsfiddle.net/julianrath/v9hpazun/13/

如果您使用 Firefox 或 Chrome 打开它并重新调整输出窗口的大小两个 tds 将占用 50%（在示例中为 ~25px）的表空间。在 Internet Explorer 中，内联 SVG 根本不会重新调整大小。

编辑：用 IE9 和 IE11 测试。

编辑：更正小提琴链接

【问题讨论】：

caniuse.com/#search=svg
使用IE9和IE11进行渲染，具体指的是什么？
没有阅读问题，只是发布了该问题以查看您的浏览器是否支持，因为就我扫描它而言，您没有指定 IE 的版本。我在 Firefox 中看到的只是一个小小的红色竖线。在 Chrome 中它可以工作。您是否尝试过这里的建议：soqr.fr/testsvg/…

标签： html css internet-explorer svg

【解决方案1】：

好的，我今天了解到table-layout 是一个非常重要的属性，如果您想根据表格的布局而不是相反的方式缩放表格中的某些内容（根据表格的内容缩放表格布局）桌子）。不幸的是 Internet Explorer 和其他人对 table-layout:auto 属性的理解不同。

#F {
    width:50px;
    table-layout:fixed;
}

http://jsfiddle.net/julianrath/v9hpazun/26/

【讨论】：