<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

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

BCD tables only load in the browser