0

我想制作一张 SVG 图像表。下面的代码在 Firefox 中运行良好，使两个相邻的黑色方块按比例放大到表格单元格的大小，但在 Chrome 中，svg 图像是表格单元格内的小东西。

我在做傻事吗？有没有一种便携的方法可以让 SVG 缩放以适合桌子？

<table width="800" height="400" border="1" cellpadding="0" cellspacing="0">
<tr>
 <td>
  <svg viewBox="0 0 220 220"><rect width="220" height="220"/>
  </svg>
 </td>
 <td>
  <svg viewBox="0 0 220 220"><rect width="220" height="220"/>
  </svg>
 </td>
</tr>
</table>
4

1 回答 1

2

唯一有点可移植的方法似乎是使用 svg 宽度/高度的绝对值，如本例所示：http: //jsfiddle.net/Rd7ed/1/。

svg { 
    width: 100px;
    height: 100px;
    display: block;
}

但是，在 Chrome 中，上述内容似乎导致边框没有完全围绕桌子绘制（可能是一个错误）。

改用百分比宽度和高度：http: //jsfiddle.net/Rd7ed/（这在 Chrome 中无法正常工作，这可能是另一个错误）。

也许您可以使用一个 svg 而根本没有表格？

于 2012-12-01T15:45:58.617 回答