gpt4 book ai didi

html - 如何将坐标添加到 SVG 折线?

转载 作者:太空狗 更新时间:2023-10-29 15:32:09 32 4
gpt4 key购买 nike

如何使用 JavaScript 将坐标添加到现有的 SVG 折线?

<svg height="240" width="700" id='svg'>
<polyline points="0, 240 40, 25 60, 40 80, 120 120, 140 200, 180 500, 120 600, 5" style="fill:none;stroke:#000;stroke-width:3" />
</svg>

我正在使用 IE 9(在 .hta 文件中)并且需要能够动态地将新点附加到折线。目标是能够创建折线图。我提前道歉,我完全不知道如何引用这个属性。对此的任何指导将不胜感激。

最佳答案

如果给多段线添加一个 id 属性,让它看起来像这样

<polyline id="polyline-id" points="0, 240 40, 25 60, 40 80, 120 120, 140 200, 180 500, 120 600, 5" style="fill:none;stroke:#000;stroke-width:3" />

您可以通过 document.getElementById 获取对它的引用

最简单的方法是通过“点”属性上的 getAttribute/setAttribute 来操作它

var points = polyline.getAttribute("points");
points += "10, 20";
points.setAttribute("points", points);

但性能最高的选项是 SVG DOM因为这避免了将点数据序列化到字符串或从字符串序列化 - 我知道的所有 UA 都在内部将数据存储为 float 或 double 组而不是字符串。

var svg = document.getElementById('svg');
var point = svg.createSVGPoint();
point.x = 10;
point.y = 20;
var polyline= document.getElementById('polyline-id');
polyline.points.appendItem(point);

关于html - 如何将坐标添加到 SVG 折线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25706565/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com