那是我的重现链接: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 类在浏览器中应用,但悬停时没有任何反应??
最佳答案
您需要将 CSS 文件导入您的组件。
import './style.css';
关于html - CSS 类对 svg 元素没有影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51389353/