Базовый SVG — как вкладывать элементы?

Я действительно ничего не знаю о 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? И как я могу заставить их сделать это?

Спасибо


svg html
person Z_z_Z    schedule 06.01.2019    source источник
comment
Что ж, на самом деле это не решает проблему вложенности, поскольку прямоугольник будет самозакрывающимся и не сможет вкладывать дочерние элементы, верно?   -  person Z_z_Z    schedule 06.01.2019

Ответы (1)


arrow_upward
3
arrow_downward

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

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

person Robert Longson    schedule 06.01.2019
comment
Спасибо за информацию. Итак, как бы вы порекомендовали позиционировать одноуровневые элементы, чтобы один всегда находился внутри другого элемента? Потому что в конечном итоге я буду перетаскивать элементы контейнера и хочу, чтобы содержимое перетаскивалось вместе с ним. - person Z_z_Z; 06.01.2019
comment
вам нужно будет реализовать некоторую конкретную логику в коде перетаскивания, чтобы предотвратить перемещение элемента, который должен оставаться внутри большего элемента, так, чтобы он отображался снаружи. - person Robert Longson; 06.01.2019
comment
Я понимаю. Спасибо за помощь - person Z_z_Z; 06.01.2019
comment
@RobertLongson, можно ли отправить вам быстрое электронное письмо о потенциальной работе консультанта? не нашел контактную информацию на вашем сайте. обратите внимание, когда увидите это, чтобы комментарий можно было удалить, а не загромождать страницу. Большое спасибо за всю вашу помощь в прошлом и вклад в SVG. - person Crashalot; 07.01.2019