0

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

当我将鼠标悬停在 svg 矩形上时，将触发悬停事件，因为立面/屋顶的父 svg 元素，所以我希望将边框添加到 svg 元素，但事实并非如此！相反，所有 svg 子元素都拥有该边框集。

为什么这个？

如您在此处看到的，已为 svg 元素注册了 OnMouseOver：

   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 元素都会显示边框！？

4

2 回答 2

0

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

如果您stroke在容器元素上设置样式属性，则它不起作用。唯一发生的事情是它由子代继承，如果它们是图形元素，则将呈现笔画。

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

<rect width="100%" height="100%"
     onMouseOver={e => this.props.currentMounting.onMountingHoveredOver(e)}
     onMouseOut={e => this.props.currentMounting.onMountingHoveredOut(e)}
     style={{ fill: 'none' }}>
于 2018-07-12T13:40:22.140 回答
0

尝试将悬停事件和其他需求带到“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>
于 2018-07-11T22:10:31.583 回答