Основные SVG - Как вкладывать элементы?

Question

Я действительно ничего не знаю о SVG, но мне нужно использовать его для приложения, которое я создаю. Так что некоторая помощь с самого начала будет очень признательна.

Я хочу вложить div внутри фигуры SVG, которая, я думаю, будет работать так:

<svg width="250" height="250" viewBox="0 0 250 250">
  <rect x="0" y="0" width="100" height="100" fill="red">
    <foreignObject width="100%" height="100%">
      <div>TEST</div>
    </foreignObject>
  </rect>
</svg>

Но, как вы видите, он визуализирует только элемент rect.

Даже если я попытаюсь использовать только text, он все равно не появится, как вы можете видеть:

<svg width="250" height="250" viewBox="0 0 250 250">
  <rect x="0" y="0" width="100" height="100" fill="red">
    <text x="50%" y="50%">TEST 2</text>
  </rect>
</svg>

Так что я здесь не так делаю? Почему элементы SVG не появляются, если они вложены в другие элементы SVG? И как я могу заставить их сделать это?

Спасибо

Answer 1

SVG позволяет только определенным элементам быть контейнерами . Некоторые из наиболее распространенных в общем случае используют элемент <g> и элемент <svg>. Другие контейнеры служат конкретным целям.

Все элементы SVG в основном расположены абсолютно, в SVG нет понятия reflow , поэтому вы можете поместить вещи как братьев и сестер и размещать их где угодно. Вам просто не нужно вкладывать вещи, как в HTML.