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';

CSS类对svg元素无效

1 个答案: