javascript - 当使用 React 包裹在 div 中时，SVG 矩形会转到新位置

Question

我是 React 新手，我遇到了一些格式问题。

我有一个 React 组件，一个作为背景元素的 SVG。在其上，我尝试渲染几个点，并在您悬停时添加注释。

当我直接返回点时，我能够得到要显示的点，但我需要将其包装在 div 中，以便我可以添加一些文本。

工作，将点渲染到正确的位置:

    class InfoPoint extends Component {
      render() {
        return (
          <rect x="10" y="93" width="15" height="12" rx="2" ry="2" fill="red" ></rect>
        );
      }
    }

不起作用，当我将其包装在 div 中时找不到该元素:

   class InfoPoint extends Component {
      render() {
        return (
          <div className="point">
          <rect x="10" y="93" width="15" height="12" rx="2" ry="2" fill="red" ></rect>
         </div>
        );
      }
    }

Answer 1

<rect>元素必须位于 <svg> 内元素。和<div> <svg> 内的元素无效元素。您不能不加区别地将 HTML 和 SVG 元素混合在一起。