Safari foreignObject tag without uppercase in devtools

Question

I'm using the foreignObject tag inside an SVG, which is working on Chrome, however, it isn't working on Safari. I have gone through about 20 solutions, but the issue persists.

One of the solutions was a user mistyping foreignObject, they instead wrote it as foreignobject (lowercase "O").

In my code, foreignObject is spelled with the correct casing, however, in Safari's devtools, I notice that the tag is spelled foreignobject!

(Below, Safari devtools screenshot, and my code screenshot)

I'm sure this is what is causing the issue I'm having, but it makes no sense, since I have it written correctly in the code, but it's misread when Safari builds the site.

Is there any precedence for something like this? What can I do to change this misreading of my element tag name?

Answer 1

The problem is that you are setting the xmlns attribute of your <foreignObject> to the XHTML name-space. Safari will thus consider it an HTML element when the SVG document is served as a standalone (if it was served inline in an HTML document, then they'd discard it.
This attribute must be set on the top HTML element, that is on the <foreignObject> content:

<foreignObject
  requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
  width="300"
  height="100"
  >
    <html-elem xmlns="http://www.w3.org/1999/xhtml">...

(Note that when served inline in an HTML document, Safari's web-dev tools will also show this element lower-cased, even though it will work correctly).