React JSX Dynamic SVG Перевести Ошибка

Question

Я новичок в React и пытаюсь выполнить динамический переход SVG, где я перевожу положение группы в соответствии с текущим состоянием компонента.По какой-то причине я получаю сообщение об ошибке:

 DOMPropertyOperations.js:139 Error: <g> attribute transform: Expected 
'(', "translate:(100 100)".

Вот функция рендеринга:

render() {
    let turns = Route.Leg.map((turn) => <circle cx={turn.to.location.latitude} cy={turn.to.location.longitude} r="5"></circle>)
    let legs = Route.Leg.map((leg) => <line x1={leg.from.location.latitude} y1={leg.from.location.longitude} x2={leg.to.location.latitude} y2={leg.to.location.longitude} stroke="black"></line>)

    let move = "translate:(" + this.state.pos.location.latitude + " " + this.state.pos.location.longitude + ")";

    return (
        <div>
            <svg width="800px" height="800px">
                <circle cx="400" cy="400" r="10"></circle>
                <g transform={move}>
                    {turns}
                    {legs}
                </g>
            </svg>
        </div>
    );
}

Линии и круги нарисованы правильно, и когда я записываю переменную "move"и выглядит правильно каждый раз, когда дом обновляется.Когда я жестко закодировал перевод, он также работает.У кого-то есть идея, что здесь не так, или я что-то упускаю?Приветствия заранее

Answer 1

Как говорится в ошибке Expected (',...

// Look down, there is no ":" character in css syntax. And check for ","
let move = "translate(" + this.state.pos.location.latitude + "," + this.state.pos.location.longitude + ")";

Это из-за неправильного синтаксиса.Вы должны использовать translate(..., а не translate:(....Также вы должны запятые отдельные значения внутри translate