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”变量时，每次dom更新时它看起来都是正确的。当我对翻译进行硬编码时，它也可以工作。有人知道这里有什么问题吗，还是我只是想念一些东西？提前加油

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

中用逗号分隔各个值

React JSX动态SVG翻译错误

1 个答案: