<foreignObject>

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с ⁨июля 2015⁩ года.

Элемент <foreignObject> SVG включает элементы из другого пространства имён XML. В браузере это, скорее всего, (X)HTML.

Контекст использования

Категории	Графический элемент, отображаемый элемент
Допустимое содержимое	Любые элементы или символьные данные

Атрибуты

height: Высота foreignObject. Тип значения: <length> | <percentage>; Значение по умолчанию: auto; Анимируемый: да
width: Ширина foreignObject. Тип значения: <length> | <percentage>; Значение по умолчанию: auto; Анимируемый: да
x: Координата x элемента foreignObject. Тип значения: <length> | <percentage>; Значение по умолчанию: 0; Анимируемый: да
y: Координата y элемента foreignObject. Тип значения: <length> | <percentage>; Значение по умолчанию: 0; Анимируемый: да

Примечание: Начиная с SVG2, x, y, width и height являются геометрическими свойствами, то есть эти атрибуты также можно использовать как свойства CSS для данного элемента.

Интерфейс DOM

Этот элемент реализует интерфейс SVGForeignObjectElement.

Пример

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    div {
      color: white;
      font: 18px serif;
      height: 100%;
      overflow: auto;
    }
  </style>

  <polygon points="5,5 195,10 185,185 10,195" />

  <!-- Common use case: embed HTML text into SVG -->
  <foreignObject x="20" y="20" width="160" height="160">
    <!--
      In the context of SVG embedded in an HTML document, the XHTML
      namespace could be omitted, but it is mandatory in the
      context of an SVG document
    -->
    <div xmlns="http://www.w3.org/1999/xhtml">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis
      mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum
      imperdiet eros. Aliquam erat volutpat.
    </div>
  </foreignObject>
</svg>

Спецификации

Спецификация
Масштабируемая векторная графика (SVG) 2> # ForeignObjectElement>

Совместимость с браузерами

	Настольные устройства					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android	WebView на iOS
`foreignObject`	1	12	2	2	3	18	4	10.1	3	1.0	4	3
`height`	1	12	2	2	3	18	4	10.1	3	1.0	4	3
`systemLanguage`	1	12	12	2	3	18	14	10.1	3	1.0	4	3
`width`	1	12	2	2	3	18	4	10.1	3	1.0	4	3
`x`	1	12	2	2	3	18	4	10.1	3	1.0	4	3
`y`	1	12	2	2	3	18	4	10.1	3	1.0	4	3

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/foreignObject