表格单元格中的内联矢量图像换行

Question

很抱歉，如果以前已经发布过；关于内联SVG的问题太多了，我找不到与这个问题接近的东西。

我有一张桌子，在单元格中有一个嵌入式SVG图像。我注意到图像对表格的宽度没有贡献，而是包裹在下一行上，而不是扩展表格并根据需要显示内联。

请注意，在第一个表中，矢量已换行到下一行，而不是随文本流动以填充屏幕宽度。这一定是真正简单的事情，但是我被困住了。我已经检查了Firefox / Chrome中的元素，没有发现可能导致这种情况的计算样式（例如display:block）。

CSS Fiddle available here。

td {border:1px solid gray; padding:0.25em; }
td img { max-height:1em; }
td img[src*="svg"] {   }

<h2>
Table 1
</h2>
<table>
<tr>
  <td>
    V
    <img src="https://svgshare.com/i/CFx.svg" title="" />
  </td>
</tr>
</table>


<h2>
Table 2
</h2>
<table>
<tr>
  <td>
    Stretch out the table width.
  </td>
</tr>
<tr>
  <td>
    V
    <img src="https://svgshare.com/i/CFx.svg" title="" />
  </td>
</tr>
</table>

Answer 1

我相信这是未定义大小的SVG所固有。

从SVG2 spec

  

还必须根据宽度和高度的大小确定属性的固有尺寸。如果未指定宽度或高度，则使用的值为初始值“ auto”。不得使用“自动”和百分比长度来确定固有宽度或固有高度。

---

  

SVG具有固有的可伸缩性，可将固有宽度和固有高度调整为指定大小的宽度和高度。因此，当指定为长度时，“ svg”元素的宽度和高度大小设置属性将控制SVG图像的固有尺寸以及将SVG图像放置在宿主文档中时使用的指定大小。

在这种情况下，引用的SVG在其属性中未指定大小，因此默认为100％x 100％（由浏览器用户代理指定）。

表格单元格100％的宽度意味着它被迫换行。

只需添加定义的高度或宽度即可解决此问题。

td {
  border: 1px solid gray;
  padding: 0.25em;
}

td img {
  max-height: 1em;
}

td img[src*="svg"] {
 height: 1em;
 vertical-align:middle;
}

<table>
  <tr>
    <td>
      V
      <img src="https://svgshare.com/i/CFx.svg" title="" />
    </td>
  </tr>
</table>

Answer 2

尝试设置img的高度，而不是max-height：

td img {
  height: 1em;
}