svg、多边形、JS函数错误

Question

我是 JS 和 SVG 的新手。我得到了一个任务，我应该编写一个代码来收集坐标（一种简单的形式），并根据这些信息在 SVG 中打印一个具有给定坐标的三角形。我必须在一个函数中完成它，因为首先我必须检查是否可以用给定的坐标绘制一个三角形。不幸的是，SVG 中的驱动不起作用。有什么解决办法吗？

代码在这里https://jsfiddle.net/n07engyt/11/

    <!doctype html>
    <link rel="StyleSheet" href="skrypt.css" type="text/css" />
    <head>
        <meta  charset  "UTF-8” />
        <title> JavaScript </title>
        <script type="application/javascript">
        function getCoordinates() {
          return{
            x1:Number(cordinates.x1.value),
            y1:Number(cordinates.y1.value),
            x2:Number(cordinates.x2.value),
            y2:Number(cordinates.y2.value),
            x3:Number(cordinates.x3.value),
            y3:Number(cordinates.y3.value)
          }
        }


        function draw() {
          var canvas = document.getElementById('canvas');
          if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            var p = getCoordinates();
            //Jeśli punkty na jednej prostej nie może być trójkąta
            if((p.x1 !== p.x2 || p.x1 !== p.x3) && (p.y1 !== p.y2 || p.y1 !== p.y3)) {
            ctx.fillStyle="#A2322E";
            console.log(p)
            ctx.beginPath();
            ctx.moveTo(p["x1"],p["y1"]);
            ctx.lineTo(p["x2"],p["y2"]);
            ctx.lineTo(p["x3"],p["y3"]);
            ctx.closePath();

            ctx.fill();

            //dodawanie napisu
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            ctx.font = "10px Arial";
            ctx.fillText("Rys.1 zrealizowany w canvas",20,180);

             //Make an SVG Container
            var svgContainer = d3.select("body").append("svg")
                                     .attr("width", 200)
                                     .attr("height", 200);

 //Draw the Rectangle
         var rectangle = svgContainer.append("rect")
                             .attr("x", 10)
                             .attr("y", 10)
                            .attr("width", 50)
                            .attr("height", 100);
            }
          }
        }
    </script>




    </head>
    <body>
        <p id="form"></p>
        <form name="cordinates">
        <table>
        <tr>
            <td> Wierzcholek</td>
            <td> Współrzędna X</td>
            <td> Współrzędna Y </td>
        </tr>

        </tr>

          <tr>
            <td>1</td>
            <td><input name="x1" type=text placeholder="x1" value="100"></td>
            <td><input name="y1" type=text placeholder="y1" value="50"></td>
          </tr>

          <tr>
            <td>2</td>
            <td><input name="x2" type=text placeholder="x2" value="130"></td>
            <td><input name="y2" type=text placeholder="y2" value="100"></td>
          </tr>

           <tr>
            <td>3</td>
            <td><input name="x3" type=text placeholder="x3" value="70"></td>
            <td><input name="y3" type=text placeholder="y3" value="100"></td>
          </tr>
        </table>
        </form>

        <button onclick="draw();changeDimensions();">Rysuj</button><br/>
        <canvas id="canvas" width="200" height="200" style="border:1px solid #000000;">Rysunek</canvas>

        <!--<svg width="200"height="200" style="border:1px solid #000000;">
                <rect id="rect1" x="10" y="10" width="0" height="0" style="stroke:#000000; fill:none;"/>
        </svg> -->

        <svg width="200" height="200" style="border:1px solid #000000;">
        <!--<rect id="rect1" x="10" y="10" width="50" height="80" style="stroke:#000000; fill:none;"/> -->
        <!--<polygon points="0,0 0,0 0,0" style="fill:lime;stroke:purple;stroke-width:1" /> -->

        <!--<rect x="0" y="0" width="0" height="0" fill="green" />-->

        <!--<polygon x="100,50" y="130,100" z="70,100" style="fill:lime;stroke:purple;stroke-width:1" />-->
        </svg>
    </body>
    </html>

Answer 1

这个任务不需要 D3，太过分了。假设你有积分[60,20, 100,40, 100,80]，你可以试试：

var SVG = document.getElementById('mySVG');
var pts = [60,20, 100,40, 100,80];

  var myPolygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
  myPolygon.setAttributeNS(null, 'points', pts.join(","));
  SVG.appendChild(myPolygon);

<svg id="mySVG" width="200" height="200" style="border:1px solid #000000;">
</svg>

svg、多边形、JS函数错误

svg, polygon, JS function error

javascript

svg

function

polygon