Как встроить SVG в foreignObject?

Question

MDN says:

Любые элементы SVG в пределах foreignObject не будет обращено, за исключением ситуации, когда правильно определен SVG-поддокумент с соответствующим атрибутом Xmlns спецификации вкладывается рекурсивно.

Я пробовал установить правильные пространства имен для всех последующих элементов без каких-либо успехов.

Что я пытаюсь выполнить это примерно так:

<svg> 
    <foreignObject> 
     some html text 
     <svg width="10" height="10"><rect fill="red" width="10" height="10" /></svg> 
    </foreignObject> 
</svg> 

Answer 1

Вы должны иметь один элемент внутри foreignObject, хотя этот элемент может иметь детей. Итак, вы можете это сделать ...

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <foreignObject width="100%" height="100%"> 
    <div xmlns="http://www.w3.org/1999/xhtml">some html text 
     <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect fill="red" width="10" height="10" /></svg> 
    </div> 
    </foreignObject> 
</svg>