<foreignObject>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

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

Пример

html,body,svg {  height: 100%;}

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 SVG2x,y,width, andheight are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

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

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