CSS 类对 svg 元素没有影响

Question

这是我的复制链接：https://stackblitz.com/edit/svgtest?file=style.css

我应用了两个 css 类：

 .section:hover {
  transform: scale(1.2);
}
.section {
  transition: all 1s;
  transform-origin: 50% 50%;
}

在那些 svg 元素上：

render() {

    return <g className="section"
      // 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 className={"section"} x="0" y="0" height="60" width="60" />
      <rect className={"section"} x="70" y="0" height="60" width="60" />
      <text  
       className="section" x="0" y="40" fill="#000" font-size="30">Facade</text>

    </g>
  }

.section 类被应用到浏览器中，但是在悬停时没有任何反应？？

Answer 1

您需要将 CSS 文件导入到组件中。

import './style.css';