如何从 vanilla JavaScript 中的对象创建 SVG 路径？

Question

我有一个这样的对象：

{
  12: 46,
  15: 50,
  18: 42,
  21: 45,
  24: 32
}

我想用纯 javascript 创建一个简单的 svg 路径，不需要额外的库。

结果必须如下所示，其中 with 和 height 调整为最大值，路径表示对象值：

<svg width="..." height="..."><path d="M ..."></path></svg>

我尝试了以下代码：

function CreateChart(data) {
    var result = 'M ';
    var array_values = Object.values(data);
    for(var i=1;i<array_values.length;i++){
        result += array_values[i][1]+ ' '+array_values[i][1]+' '
    }
    return result;
}

Answer 1

您的主要问题是创建路径字符串（d 属性）。您可以像这样在原版 JS 中执行此操作：

const coords = [
    [12, 46],
    [15, 50],
    [18, 42],
    [21, 45],
    [24, 32],
];
let d = "";
let width = 0;
let height = 0;
for (x in coords) {
    d += d === "" ? "M" : " L";
    d += `${coords[x][0]} ${coords[x][1]}`;
    maxX = Math.max(width, x);
    maxY = Math.max(height, coords[x]);
}

现在您有了路径 ("M12 46 L15 50 L18 42 L21 45 L24 32") 以及宽度和高度。只需创建一个 svg 元素并设置宽度和高度。然后创建一个路径，将其 d 属性设置为 d 变量并将其附加到 svg 元素。