SVG 中的 ForeignObject 不起作用 - React

Question

我正在尝试在 SVG 中显示 React 组件。我使用 foreignObject 组件在 SVG 中显示我的 React 对象 (ToolbarItem)。但是，没有显示任何内容。我做错了什么？感谢您的帮助

<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>

Answer 1

您可以添加 body 标签

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

编辑：以上有效但会生成一条警告消息。

改为执行以下操作：

<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>

SVG 中的 ForeignObject 不起作用 - React

ForeignObject in an SVG doesn't work - React

javascript

svg

reactjs

foreignobject