如何解决Javascript SVG通过JS插入多边形
我是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 举报,一经查实,本站将立刻删除。