我是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/