javascript - 将数组中的对象连接到 SVG 路径

Question

我想动态设置 svg 路径的分段。我将这些段作为对象存储在数组中。但我在将它们连接到以空格作为分隔符的有效路径时遇到问题。我尝试了 join() 但我不确定如何正确访问数组中的对象。实现这一目标的最佳方法是什么？

d="M 10 20 L 10 0 L 30 50 z"

let segments = [
       {
           "type": "M",
           "values": [ 10, 20 ]
       },
       {
            "type": "L",
            "values": [ 10, 0 ]
       },
       {
             "type": "L",
             "values": [ 30, 5 ]
       }
]

Answer 1

map +连接在这里应该很好:

> segments.map(seg => `${seg.type} ${seg.values.join(' ')}`).join(' ') + " z";
  "M 10 20 L 10 0 L 30 5 z"