我想使用 JavaScript 創建一個可調整大小的 SVG。如果你運行代碼，你會注意到 "svgTriangle[0].innerHTML = "<polygon points='";" 行不會附加在 SVG 標記內。如果有人可以幫助我弄清楚為什么沒有附加它，我將不勝感激。謝謝。
var svgTriangle = document.getElementsByClassName("svg-triangle");
var bgTrianglePoints;
function updateOnResize() {
bgTrianglePoints = [
[0, 0],
[window.innerWidth * 0.76, 0],
[window.innerWidth * .16, window.innerHeight * 1.2],
[0, window.innerHeight * 1.2]
];
svgTriangle[0].innerHTML = "<polygon points='";
for (var i = 0; i < bgTrianglePoints.length; i ) {
svgTriangle[0].innerHTML = bgTrianglePoints[i][0] "," bgTrianglePoints[i][1] " ";
}
svgTriangle[0].innerHTML = "'/>";
}
window.onresize = function() {
updateOnResize();
}
updateOnResize();html,
body {
margin: 0px;
padding: 0px;
}
#header {
width: 100vw;
height: 85vh;
}
.svg-triangle {
width: 100%;
height: 100%;
fill: red;
}<div id="header">
<svg xmlns="http://www.w3.org/2000/svg" class="svg-triangle"></svg>
</div>uj5u.com熱心網友回復：
要回答您的問題，為什么第一行沒有出現在 HTML 中，可能是因為它使 HTML 無效。您可以改為使用以下document.createElementNS方法：
const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
polygon在 SVG 命名空間中創建元素。
然后，您可以為 points 屬性創建字串：
let points = "";
for (var i = 0; i < bgTrianglePoints.length; i ) {
points = bgTrianglePoints[i][0] "," bgTrianglePoints[i][1] " ";
}
最后在元素上設定屬性：
polygon.setAttribute("points", points);
現在，您可以使用svgTriangle.appendChild(polygon)將多邊形添加到 HTML。
另一種可能性是points在多邊形元素上使用屬性，這是一個SVGPointList并appendItem在回圈中使用它來添加點，但這是相當多的代碼，并不是真正必要的。此外，SVGPoint已被棄用...
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/488894.html
標籤：javascript html svg
上一篇：由JS生成的SVG文本不顯示