Border不是直接应用于svg元素，而是应用于它的子元素

Question

这是我的stackblitz/codepen：https://stackblitz.com/edit/svgtest?file=index.tsx

当我将鼠标悬停在svg矩形上时，悬停事件会触发，因为facade/roof的父svg元素，所以我希望将边界添加到svg元素中，但事实并非如此！相反，所有svg子元素自己都有这个边界集。

为什么这样？

OnMouseOver为svg元素注册，如您所见：

return <svg
onMouseOver={e => this.props.currentMounting.onMountingHoveredOver(e)}
onMouseOut={e => this.props.currentMounting.onMountingHoveredOut(e)}
onClick={e => this.props.currentMounting.onMountingSelected(e.currentTarget.id)}
opacity={this.props.currentMounting.opacity}
style={{ fill: 'red' }}
id={this.props.currentMounting.id}>
<rect x="0" y="0" height="60" width="60" />
<rect x="70" y="0" height="60" width="60" />
</svg>

但是，尽管如此，当我悬停在所有rect元素上时，它们都会显示边界！？

Answer 1

<svg>元素是容器元素。这意味着它们本身不绘制，但可以对作为图形元素的子元素进行分组。

如果在容器元素上设置stroke样式属性，则该属性没有任何效果。唯一会发生的事情是，它由子项继承，如果它们是图形元素，则将渲染笔划。

如果<svg>是直接嵌入HTML元素中的最外层元素，则可以设置border属性。但在您的情况下，它们嵌套在另一个<svg>中，唯一的解决方案是绘制一个矩形(在其他矩形之前(，覆盖元素的整个视口，并在上面设置一个笔划：

<rect width="100%" height="100%"
onMouseOver={e => this.props.currentMounting.onMountingHoveredOver(e)}
onMouseOut={e => this.props.currentMounting.onMountingHoveredOut(e)}
style={{ fill: 'none' }}>

Answer 2

尝试将悬停事件和其他需求提升到"rect"级别，而不是svg标记级别：

示例：

return <svg
onClick={e => this.props.currentMounting.onMountingSelected(e.currentTarget.id)}
opacity={this.props.currentMounting.opacity}
style={{ fill: 'red' }}
id={this.props.currentMounting.id}>
<rect onMouseOver={e => this.props.currentMounting.onMountingHoveredOver(e)}
onMouseOut={e => this.props.currentMounting.onMountingHoveredOut(e)} x="0" y="0" height="60" width="60" />
<rect onMouseOver={e => this.props.currentMounting.onMountingHoveredOver(e)}
onMouseOut={e => this.props.currentMounting.onMountingHoveredOut(e)} x="70" y="0" height="60" width="60" />
</svg>