使用 Javascript 创建可变 SVG

乔纳森·穆尔瓦希尔

我想使用 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>

阿波罗79

要回答您的问题,为什么第一行没有出现在 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在多边形元素上使用属性,这是一个SVGPointListappendItem在循环中使用它来添加点,但这是相当多的代码,并不是真正必要的。此外,SVGPoint已被弃用...

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章