Question

如何使SVG在表格单元格中占据整个高度？

目标是通过仅改变cell（）内的代码而不用以像素为单位硬编码高度来实现这一目标。它在firefox和safari中工作，但在IE和Chrome中它很奇怪（在Chrome中没有大小，在IE中很大）

- fiddle中的示例（您看不到箭头）

Answer 1

在max-height:100%上设置<svg>是Chrome的已知解决方法。

同时添加display: block可进一步改善渲染效果。

SVG {
    display: block;
    max-height: 100%;
}

请参阅：http://jsfiddle.net/DyUGN/8/

我不确定IE到底在做什么。我不知道解决方法。您可能必须使用Phrogz的方法。或者，如果您可以使用它，只需明确设置<svg> width和height：

<svg version="1.1" width="18" height="18" ...

请参阅：http://jsfiddle.net/DyUGN/9/

Answer 2

这是我能想到的最佳答案;它不优雅。使用JavaScript计算单元格的高度并设置要填充的SVG的高度，减去一些任意填充。

演示：http://jsfiddle.net/DyUGN/6/

window.onresize = function(){
  var svg = document.getElementsByTagName('svg')[0];
  var td = svg.parentNode;
  // No idea why an extra 2px need to be subtracted.
  svg.setAttribute('height',(td.offsetHeight-2)+'px');
}
window.onresize();

该演示使用CSS将SVG设置为display:block（因此它不会从内联文本下行间距获得任何额外的'高度'），将SVG设置为最初的高度为1px （这样它最初不会太高），并专门为SVG设置单元格，使其上没有填充。

如果您希望在单元格上填充，则需要在代码中明确说明（减去填充量）。不幸的是，JS没有简单的方法来计算没有填充的元素的高度，也不容易计算以像素为单位应用的填充量。

SVG在桌子内占据全高

2 个答案:

演示：http://jsfiddle.net/DyUGN/6/