使用Javascript将SVG路径点串在一起

时间:2013-09-22 01:20:17

标签: javascript svg

我可以使用以下JavaScript使用Inkscape生成的一些点来创建SVG六边形:

var createHex = function(fill) {
    var NS = 'http://www.w3.org/2000/svg';
    var hexagon = document.createElementNS(NS, 'path');
    hexagon.setAttribute('d', 'm 311.5022,270.79644 62.8676,108.88986 -62.86759,108.88987 -125.73518,1e-5 -62.8676,-108.88986 62.86759,-108.88987 z');
    hexagon.setAttribute('fill', fill);
    hexagon.setAttribute('style', 'opacity:0.125');
    return hexagon;
}

然而,当尝试使用一些Javascript数学和字符串连接以相同的方式处理点生成时,该函数无法返回任何内容:

var test = function(fill) {
    var NS = 'http://www.w3.org/2000/svg';
    var test = document.createElementNS(NS, 'path');
    var pt1x = 1 * 300;
    var pt1y = 0 * 300;
    var pt2x = (1/2) * 300;
    var pt2y = (sqrt(3)/2) * 300;
    var pt3x = (-1/2) * 300;
    var pt3y = (sqrt(3)/2) * 300;
    var pt4x = -1 * 300;
    var pt4y = 0 * 300;
    var pt5x = (-1/2) * 300;
    var pt5y = (-sqrt(3)/2) * 300;
    var pt6x = (1/2) * 300;
    var pt6y = (-sqrt(3)/2) * 300;
    test.setAttribute('d', 'm ' + pt1x + ',' + pt1y + ' ' + pt2x + ',' + pt2y + ' ' + pt3x + ',' + pt3y + ' ' + pt4x + ',' + pt4y + ' ' + pt5x + ',' + pt5y + ' ' + pt6x + ',' + pt6y + ' z');
    test.setAttribute('fill', fill);
    test.setAttribute('style', 'opacity:0.125');
    return test;
}

我是JavaScript和SVG的新手;有谁能告诉我我错过了什么?

1 个答案:

答案 0 :(得分:2)

检查控制台日志中的错误。 sqrt()不是全局JavaScript函数。你想要Math.sqrt()