javascript - React JSX 动态 SVG 转换错误

Question

我是 React 新手，正在尝试进行动态 Svg Transition，其中根据当前组件状态转换组的位置。由于某种原因，我收到错误消息:

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

线条和圆圈绘制正确，当我记录“移动”变量时，每次 dom 更新时看起来都是正确的。当我对翻译进行硬编码时，它也可以工作。有人知道这里出了什么问题吗，或者我只是错过了什么？提前干杯

Answer 1

如错误中所述预期(',...

// 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

中用逗号分隔值