Текстовые обновления SVG ClipPath в Firefox, но не в Chrome

Question

Я использую путь клипа SVG для динамического изменения числа на своем сайте, и хотя он прекрасно работает в Firefox, он не работает в Chrome.

Я использую state.rating в двух местах - один раз в тексте svg и один раз внизу в теге p. Нажатие в любом месте во внешнем div добавляет один к рейтингу. Это отлично работает в Firefox, и текст SVG обновляется вместе с тегом p.

В 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>
  )}
}