SVG путь перехода работает только на Chrome. Способы заставить переход работать во всех браузерах

Question

В настоящее время я работаю над приложением реагирования, где оно имеет временную шкалу SVG. У SVG есть путь с несколькими точками, которые можно нажимать. При каждом нажатии атрибут d для изменения пути. У меня есть переход по пути, указанному css. Переход пути отлично работает в Chrome, однако не работает в других браузерах.

Есть ли способ решить эту проблему?

Я также попробовал тег animate, но он тоже не сработал.

Заранее спасибо.

Как выглядит анимация в сафари Путь в Safari

Как выглядит анимация в Chrome (ожидаемый результат). Хромированная дорожка

<div className={`${this.props.styleClass}`}>
<div className={`${this.props.styleClass}_cont`}>
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
            viewBox="-10 0 1200.5 336">

        <path className="stOffering0" d={this.state.path} />

        <g className={this.state.season === 'August-MidOctobr' ? 'season_top_text show': 'season_top_text'}>
            <text transform="matrix(1 0 0 1 1.4248 20.7472)" className="stOffering1 stOfffering2 stOffering3 h5 font-regular">August to Mid -October</text>
        </g>

        <g className={this.state.season === 'MidOctobr-December' ? 'season_top_text show': 'season_top_text'}>
            <text transform="matrix(1 0 0 1 278.622 20.7472)" className="stOffering1 stOfffering2 stOffering3 h5 font-regular">Mid October to December</text>
        </g>

        <g className={this.state.season === 'MidDecember-January' ? 'season_top_text show': 'season_top_text'}>
            <text transform="matrix(1 0 0 1 623.0005 20.7472)" className="stOffering1 stOfffering2 stOffering3 h5 font-regular">Mid December to January</text>
        </g>

        <g className={this.state.season === 'EndJanuary-February' ? 'season_top_text show': 'season_top_text'}>
            <text transform="matrix(1 0 0 1 896.6766 20.7472)" className="stOffering1 stOfffering2 stOffering3 h5 font-regular">End of January to February</text>
        </g>

        <path className="stOffering4" d="M6.9,73.2"/>

        <g onClick={(e) => this.props.handler('MidOctobr-December')} className={this.state.season === 'MidOctobr-December' ? 'season_bottom_text hide': 'season_bottom_text'}>
            <text transform="matrix(1 0 0 1 301.2817 231.0352)" className="stOffering5 stOfffering2 stOffering6 h5 font-regular">Mid October to December</text>
        </g>

        <g className={this.state.season === 'MidOctobr-December' ? 'season_circles oct-dec hide': 'season_circles'}>
            <circle id="Ellipse_1-11" className="stOffering5 large" cx="416.3" cy="175" r={this.state.season === 'MidOctobr-December' ? '15' : '5' }/>
            <circle id="Ellipse_1_copy-10" className="stOffering5 small" cx="416.3" cy="203.5" r="2.5"/>
            <line id="Line_16-10" className="stOffering7 line" x1="416.3" y1="170.5" x2="416.3" y2="205.5"/>
        </g>

        <g onClick={(e) => this.props.handler('MidDecember-January')} className={this.state.season === 'MidDecember-January' ? 'season_bottom_text hide': 'season_bottom_text'}>
            <text transform="matrix(1 0 0 1 645.3417 171.124)" className="stOffering5 stOfffering2 stOffering6 h5 font-regular">Mid December to January</text>
        </g>

        <g className={this.state.season === 'MidDecember-January' ? 'season_circles dec-jan hide': 'season_circles'}>
            <circle id="Ellipse_1-11_2_" className="stOffering5 large" cx="758.4" cy="115.1" r={this.state.season === 'MidDecember-January' ? '15' : '5' }/>
            <circle id="Ellipse_1_copy-10_2_" className="stOffering5 small" cx="758.4" cy="143.6" r="2.5"/>
            <line id="Line_16-10_2_" className="stOffering7 line" x1="758.4" y1="110.6" x2="758.4" y2="145.6"/>
        </g>

        <g onClick={(e) => this.props.handler('August-MidOctobr')} className={this.state.season === 'August-MidOctobr' ? 'season_bottom_text hide': 'season_bottom_text'}>
            <text transform="matrix(1 0 0 1 0.4437 297.5374)" className="stOffering5 stOfffering2 stOffering6 h5 font-regular">August to Mid-October</text>
        </g>

        <g className={this.state.season === 'August-MidOctobr' ? 'season_circles aug-oct hide': 'season_circles'}>
            <circle id="Ellipse_1-11_1_" className="stOffering5 large" cx="5.4" cy="241.5" r={this.state.season === 'August-MidOctobr' ? '15' : '5' }/>
            <circle id="Ellipse_1_copy-10_1_" className="stOffering5 small" cx="5.4" cy="270" r="2.5"/>
            <line id="Line_16-10_1_" className="stOffering7 line" x1="5.4" y1="237" x2="5.4" y2="272"/>
        </g>

        <g onClick={(e) => this.props.handler('EndJanuary-February')} className={this.state.season === 'EndJanuary-February' ? 'season_bottom_text hide': 'season_bottom_text'}>
            <text transform="matrix(1 0 0 1 942.3452 298.0492)" className="stOffering5 stOfffering2 stOffering6 h5 font-regular">End of January to February</text>
        </g>
        <g className={this.state.season === 'EndJanuary-February' ? 'season_circles jan-feb hide': 'season_circles'}>
            <circle id="Ellipse_1-11_3_" className="stOffering5 large" cx="1174.5" cy="242" r={this.state.season === 'EndJanuary-February' ? '15' : '5' }/>
            <circle id="Ellipse_1_copy-10_3_" className="stOffering5 small" cx="1174.5" cy="270.5" r="2.5"/>
            <line id="Line_16-10_3_" className="stOffering7 line" x1="1174.5" y1="237.5" x2="1174.5" y2="272.5"/>
        </g>
    </svg>
</div>

svg{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;

  path{
    transition: all linear 0.6s;
  }
}

Как видно из кода, атрибут d в пути изменяется с изменением состояния. Переход этого изменения не работает должным образом в Safari и Firefox