Граница применяется не непосредственно к элементу SVG, а к его дочерним элементам?

Question

Это мой stackblitz / codepen: https://stackblitz.com/edit/svgtest?file=index.tsx

Когда я наводю курсор мыши на прямоугольники svg, событие hover срабатывает тогда, потому что родительский элемент 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>

Но, несмотря на это, все прямоугольные элементы отображают границу, когда я наводю на них курсор!?

Answer 1

<svg> элементы являются контейнерными элементами. Это означает, что они не нарисованы сами, но могут группировать дочерние элементы, которые являются графическими элементами.

Если вы установите stroke Свойство style для элемента контейнера не имеет никакого эффекта. Единственное, что происходит, это то, что он наследуется дочерними элементами, которые, если они являются графическими элементами, будут отображать обводку.

Если <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

Попробуйте перевести события hover и другие потребности на уровень "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>