Javascript SVG通过JS插入多边形

编程问答 2022-06-08

问题描述

我是Java语言的新手，我想通过svg绘制多边形。 当我想通过Javascript插入新的多边形（而不是直接在HTML中键入内容）时，它似乎不起作用，并且多边形也不会出现。虽然我将多边形的代码与chrome中的F12窗口进行了比较，但它们似乎相同，但是其中一个是有效的，而另一个是无效的。请告诉我我犯的错误。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Test</title>
    <!-- <script src="/eel.js"></script> -->
    <!-- <link href="style.css" rel="stylesheet"> -->
    <style>
        *,*::before,*::after {
            Box-sizing: border-Box;
            font-family: Gotham Rounded,sans-serif;
            font-weight: normal;
        }

        body {
            padding: 0;
            margin: 0;
            background: linear-gradient(to right,#00AAFF,#00FF6C);
        }

        .MainGrid {
            display: grid;
            justify-content: center;
            align-content: center;
            min-height: 90vh;
            margin-top: 5vh;
            margin-bottom: 5vh;
            margin-left: 5vw;
            margin-right: 5vw;
            
            

            border-style: solid;
            border-width: 3px;
            border-color: black;
        }

        .displayer {
            border-style: solid;
            border-width: 3px;
            border-color: blue;
        }

        polygon {
        stroke-width: 1;
        stroke: red;
        fill: lime;
        pointer-events: visible;
        }

        polygon:hover {
        fill: red;
        }
    </style>

</head>
<body>
    <div class="MainGrid">
        <div class="displayer">
            <svg DrawSvg class="DrawSvg">
                <!-- <polygon class='Drawpoly' points="5,5 100,100 5,100"></polygon> -->
            </svg>
            
        </div>
    </div>
</body>
<script type="text/javascript" defer>
    var DrawSvg = document.querySelector('[DrawSvg]')
    console.log(DrawSvg)

    for (let i=0; i<1; i++) {
        // let Drawpoly = Drawpolys[i];
        var Drawpoly = document.createElement("polygon");
        DrawSvg.appendChild(Drawpoly);
        Drawpoly.setAttribute("class","Drawpoly");
        // Drawpoly.setAttribute("Drawpoly");
        Drawpoly.setAttribute("points","5,100");
        Drawpoly.addEventListener('click',() => {
            console.log(i);
            // Drawpoly.setAttribute("points","50,50 145,145 50,145");
            Drawpoly.setAttribute("points","100,0 50,0 100,100");
        })
    }
</script>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptpolygonsvgsvgsvg