Firefox而非Chrome中的SVG ClipPath文本更新

Question

我使用的是SVG剪辑路径来动态更改网站上的数字，尽管它在Firefox中可以正常使用，但在Chrome中却无法使用。

我在两个地方使用state.rating-一次在svg文本中，一次在p标签的底部。单击外部div的任意位置可将等级加1。这在Firefox中非常有效，并且SVG文本和p标签一起更新。

但是，在Chrome中，它不会更改该值。我发现，即使我稍微调整窗口大小，文本也会更新为正确的数字。

这只是Chrome讨厌的东西吗？

class SmallRating extends React.Component {
  state = {
    rating: 1
  }

  addOne = () =>{
    this.setState({rating: this.state.rating + 1})
  }

render(){
  return (
      <div className="ratingBox" onClick={this.addOne}>
        <svg style={{width: 0, height: 0}}>
          <clipPath id="ratingSVGQuality">
            <text className="smallSVGText" y="72">{this.state.rating}</text>
          </clipPath>
        </svg>
        <div>
          <div>
            <div className="QualityNumber">
            </div>
          </div>
          <p>{this.state.rating}</p>
        </div>
      </div>
  )}
}