1563973 - ForeignObject does not render when inserted programmatically.

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[another_dev]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:67.0) Gecko/20100101 Firefox/67.0

Steps to reproduce:

1. Open Firefox
2. Open a webpage which attempts to insert a foreignBody into an SVG programmatically. (Here is an example -> https://jsfiddle.net/g7o1wkLx/7/ )
3. Observe that the foreignBody does not render.

Actual results:

The programmatically inserted foreignBody does not render. If you inspect it in the editor, edit it as HTML, and make a simple change (like inserting a space at the beginning), then it renders.

Notice: this StackOverflow question (https://stackoverflow.com/questions/39504988/react-svg-html-inside-foreignobject-not-rendered) shows the HTML change necessary (https://i.stack.imgur.com/DMonA.gif) to render the foreignBody. The suggested answer also does not work.

Expected results:

The inserted foreignBody should render where it was inserted.

Comment 1

[Robert Longson [:longsonr]]

SVG elements such as foreignObject cannot be created with createElement, you must use createElementNS (as you do elsewhere in the script).