SVG rect 在用 React 包裹在 div 中时会转到新位置

Question

我是 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元素混合在一起。