Question

我想用这个代码绘制一个三角形（使用点数组和SVG）。但是，当我编译这段代码时，我无法得到结果。我该如何修改这段代码？

<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

代码来自my stack snippet。堆栈片段将代码分为html，样式和javascript部分。

您已正确将javascript部分放入脚本标记中，但您也将样式部分放在那里。这是正确的汇编到单个html页面......

<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>

用SVG＆amp;绘制三角形点阵

1 个答案: