Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.


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

Note: Starting with SVG2 x, y, width, and height are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

Глобальные атрибуты

Core Attributes
Most notably: id, tabindex
Styling Attributes
class, style
Conditional Processing Attributes
Most notably: requiredExtensions, systemLanguage
Event Attributes
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
Presentation Attributes
Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
Aria Attributes
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

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

КатегорииНет
Разрешённый контентЛюбые элементы и символы

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

Specification Status Comment
Scalable Vector Graphics (SVG) 2
Определение '<foreignObject>' в этой спецификации.
Кандидат в рекомендации  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение '<foreignObject>' в этой спецификации.
Рекомендация Initial definition

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
foreignObjectChrome Полная поддержка 1Edge ? Firefox Полная поддержка 2IE Нет поддержки НетOpera Полная поддержка 2Safari Полная поддержка 3WebView Android Полная поддержка 4Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 3Samsung Internet Android ?
heightChrome Полная поддержка 1Edge ? Firefox Полная поддержка 2IE Нет поддержки НетOpera Полная поддержка 2Safari Полная поддержка 3WebView Android Полная поддержка 4Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 3Samsung Internet Android ?
widthChrome Полная поддержка 1Edge ? Firefox Полная поддержка 2IE Нет поддержки НетOpera Полная поддержка 2Safari Полная поддержка 3WebView Android Полная поддержка 4Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 3Samsung Internet Android ?
xChrome Полная поддержка 1Edge ? Firefox Полная поддержка 2IE Нет поддержки НетOpera Полная поддержка 2Safari Полная поддержка 3WebView Android Полная поддержка 4Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 3Samsung Internet Android ?
yChrome Полная поддержка 1Edge ? Firefox Полная поддержка 2IE Нет поддержки НетOpera Полная поддержка 2Safari Полная поддержка 3WebView Android Полная поддержка 4Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 3Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна

Метки документа и участники

Внесли вклад в эту страницу: warsan
Обновлялась последний раз: warsan,