Question

那是我的堆栈闪电/密码笔：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元素都在我将鼠标悬停在它们上方时显示边框！？

Answer 1

尝试将悬停事件和其他需求置于“ rect”级别，而不是svg标签级别：

示例：

class MyWindowController: NSWindowController
{
    let thing: Thing

    override var windowNibName: NSNib.Name? {
        return NSNib.Name(rawValue: "MyNib")
    }

    init(thing: Thing) {
        self.thing = thing

        super.init(window: nil)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Answer 2

<svg>元素是container elements。这意味着它们不会自己绘制，但可以对graphics elements的子元素进行分组。

如果在容器元素上设置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' }}>

边框不是直接应用于svg元素，而是直接应用于其子元素？

2 个答案: