Question

我正在尝试将一组点转换为SVG中的曲线/路径。

我有类似[[0,0], [100,50], [50,100], [350,50]]的内容，并希望将其转换为曲线。我认为它必须是一条路径，并带有曲线的控制点。

我测试了使用

添加svg的新路径

var svg = document.querySelector('svg');
var points = [
    [100, 100],
    [200, 150],
    [100, 200],
    [100, 300],
    [300, 300]
];
points.forEach(function (point, i, points) {
    if (!i) return;
    var start = points[i-1];
    var end = point;

    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    var x = Math.round((start[0] + end[0]) / 1.5);
    var controlA = x + ',' + start[1];
    var controlB = x + ',' + end[1];

    path.setAttribute('d', 'M' + start.join(',') + ' C' + controlA + ' ' + controlB + ' ' + end.join(','));
    path.setAttribute('stroke', 'black');
    path.setAttribute('stroke-width', 1);
    path.setAttribute('fill', 'none');
    svg.appendChild(path);
});

但那并没有像预期的那样奏效...... 任何建议都是相关的。我想要实现的是更多＆＃34;手绘＆＃34;曲线，没有任何角落...

http://jsfiddle.net/3vgyf1qm/1/

将svg点数组转换为曲线

0 个答案: