我是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>
        );
      }
    }

最佳答案

<rect>元素必须在<svg>元素内。并且<div>元素在<svg>元素内无效。您不能随意将HTML和SVG元素混合在一起。

关于javascript - 用React包裹在div中时,SVG rect移到新位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44847517/

10-14 22:52
查看更多