Встроенное векторное изображение переносится в ячейку таблицы

Question

Извинения, если это было опубликовано ранее;Есть так много вопросов, касающихся встроенных SVG, что я не могу найти ничего похожего на эту проблему.

У меня есть таблица, а внутри ячеек есть встроенное изображение SVG.Я заметил, что изображение не влияет на ширину таблицы, а переносится на следующую строку, а не расширяет таблицу и отображает ее как требуется.

Обратите внимание, что в первой таблице вектор переносится в следующуюлиния, а не поток с текстом, чтобы заполнить ширину экрана.Это должно быть что-то очень простое, но я застрял.Я проверил элемент в Firefox / Chrome и не вижу вычисленных стилей, которые могли бы вызвать это (например, display:block).

Скрипка CSS доступна здесь .

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'.'auto' и длины в процентах не должны использоваться для определения внутренней ширины или внутренней высоты.

---

SVG, будучи изначально масштабируемым, адаптирует внутреннюю ширину и внутреннюю высоту кширина и высота указанного размера.Поэтому, если указать длину, свойства изменения ширины и высоты элемента 'svg' управляют внутренними размерами изображения SVG и указанным размером, который используется при размещении изображения SVG в главном документе.

В этом случае указанный SVG не имеет размера, указанного в его атрибутах, и по умолчанию равен 100% на 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;
}