To draw triangle with SVG & array of points

Question

I want to draw a triangle with this code (using array of points & SVG). But, when i compile this code, i can't get a result. how can i modify this code??

<html>
<body>
<script>
var svg = document.getElementById("svg");
var polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
svg.appendChild(polygon);

var array = arr = [ [ 0,0 ], 
         [ 50,0 ],
         [ 25,25 ], ];

for (value of array) {
  var point = svg.createSVGPoint();
  point.x = value[0];
  point.y = value[1];
  polygon.points.appendItem(point);
}

polygon {
  stroke: black;
}

<svg id="svg">
</svg>

</script>
</body>
</html>

Answer 1

The code is from my stack snippet . Stack snippets divide the code into html, style and javascript parts.

You've correctly put the javascript part into a script tag but you've put the style section there too. This is the correct assembly into a single html page...

<html>
<head>
<style>
polygon {
  stroke: black;
}
</style>
</head>
<body>
<svg id="svg">
</svg>
<script>
var svg = document.getElementById("svg");
var polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
svg.appendChild(polygon);

var array = arr = [ [ 0,0 ], 
         [ 50,0 ],
         [ 25,25 ], ];

for (value of array) {
  var point = svg.createSVGPoint();
  point.x = value[0];
  point.y = value[1];
  polygon.points.appendItem(point);
}

</script>
</body>
</html>

To draw triangle with SVG & array of points

Question

1 answers

solution1
0 ACCPTED 2017-08-26 13:00:03

To draw triangle with SVG & array of points

Question

1 answers

solution1 0 ACCPTED 2017-08-26 13:00:03

solution1
0 ACCPTED 2017-08-26 13:00:03