<foreignObject>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

Пример

html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    polygon {
      fill: black;
    }

    div {
      color: white;
      font: 18px serif;
      height: 100%;
      overflow: auto;
    }
  </style>

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

  <!-- Типичный пример использования: встраивание HTML-текста в SVG -->
  <foreignObject x="20" y="20" width="160" height="160">
    <!--
В контексте SVG, внедрённого в HTML, пространство имён XHTML может и следует избегать,
но это обязательно в контексте документа SVG
   -->
    <div xmlns="http://www.w3.org/1999/xhtml">
      - Смолчал хозяин, да и то, что мог сказать - Мне невдомёк, но во владениях
      чертога Поможет дом срубить да судьбы вам связать. Не веришь ежли -
      испроси у Бога...
    </div>
  </foreignObject>
</svg>

Атрибуты

height

Этот атрибут определяет высоту прямоугольника. Value type: <length>|<percentage> ; Default value: auto; Animatable: yes

width

Этот атрибут определяет ширину прямоугольника. Value type: <length>|<percentage> ; Default value: auto; Animatable: yes

x

Этот атрибут определяет координату x контейнера svg. Это не влияет на внешние элементы SVG. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

y

Этот атрибут определяет координату Y контейнера SVG. Это не влияет на внешние элементы SVG. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

Примечание: Starting with SVG2 x, y, width, and height are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

Примечания по использованию

КатегорииГрафические элементы, Отображаемый элемент
Разрешённый контентЛюбые элементы и символы

Характеристики

Specification
Scalable Vector Graphics (SVG) 2
# ForeignObjectElement

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
foreignObject
height
systemLanguage
width
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support