SVG 中的 ForeignObject 不起作用

问题描述

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

解决方法

您可以添加 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>

foreignobject javascript reactjs reactjs reactjs reactjs svg svg svg

SVG 中的 ForeignObject 不起作用 - React

问题描述

解决方法

相关问答