SVG 中的 ForeignObject 不起作用 - React答案

【问题标题】：ForeignObject in an SVG doesn't work - ReactSVG 中的 ForeignObject 不起作用 - React
【发布时间】：2020-12-30 18:58:55
【问题描述】：

我正在尝试在 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>

【问题讨论】：

标签： javascript reactjs svg foreignobject

【解决方案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>

【讨论】：