[SOLVED] ForeignObject in an SVG doesn't work

ForeignObject in an SVG doesn't work - React

I'm trying to display a React component inside of an SVG. I used the foreignObject component to display my React object (ToolbarItem) inside of the SVG. However, nothing is displayed. What I did wrong? Thanks for your help

<svg xmlns="http://www.w3.org/2000/svg" width="222.002" height="119.151" viewBox="0 0 222.002 119.151">
  <g id="Margin" transform="translate(-51 -59)">
    <path id="Soustraction_10" data-name="Soustraction 10" d="M10914,6398.1h0l-39-38.132v-41.828l39-38.139Z" transform="translate(-10641 -6220.475)" fill="#313c57">
      <foreignObject x="40" y="40" width="100" height="100">
        <ToolbarItem propKey="marginTop" type='draggableNumber' max={maxTop} />
      </foreignObject>
    </path>
  </g>
</svg>

Solution

You can add a body tag

<foreignObject x="40" y="40" width="100" height="100">
  <body>
    <ToolbarItem propKey="marginTop" type='draggableNumber' max={maxTop} />
  </body>      
</foreignObject>

EDIT: the above works but generates a warning message.

Do the following instead :

<foreignObject x="40" y="40" width="100" height="100">
      <div data-xmlns="http://www.w3.org/1999/xhtml">
        <ToolbarItem propKey="marginTop" type='draggableNumber' max={maxTop} />
      </div>      
    </foreignObject>