1

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

4

1 回答 1

0

您可以添加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>
于 2021-01-17T05:30:04.783 回答