StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POStringing together SVG path points using Javascript
text
Body
copied!<p>I'm able to use the following JavaScript to create an SVG hexagon using some points generated from Inkscape:</p> <pre><code>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; } </code></pre> <p>Yet while attempting to have some Javascript math and string concatenation handle the point generation in the same fashion, the function fails to return anything:</p> <pre><code>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; } </code></pre> <p>I'm new to both JavaScript and SVG; anybody able to tell me what I'm missing?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload