<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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

Элемент <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

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