如何将坐标添加到SVG折线? [英] How do I add coordinates to an SVG polyline?

问题描述

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

How do I add coordinates to an existing SVG polyline with JavaScript?

<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文件中)，并且需要能够将新点动态附加到折线.目标是能够创建折线图.我事先表示歉意，我完全不知道如何引用此属性.任何对此的指导将不胜感激.

I am using IE 9 (in a .hta file) and need to be able to dynamically append new points to the polyline. The goal is to be able to create a line graph. I apologize in advance, I have absolutely no idea how to reference this attribute. Any guidance for this would be greatly appreciated.

推荐答案

如果您向折线添加id属性，使其看起来像这样

If you add an id attribute to the polyline so that it looks like this

<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

最简单的方法是通过"points"属性上的getAttribute/setAttribute对其进行操作

The simplest way is to manipulate it via getAttribute/setAttribute on the "points" attribute

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

，但是性能最高的选项是 SVG DOM ，避免将点数据串行化到字符串或从字符串串行化-我知道的所有UA在内部将数据存储为浮点或双精度数组而不是字符串.

but the highest performance option is the SVG DOM as that avoids serialising the points data to/from a string - all UAs I know of store the data internally as an array of floats or doubles rather than a string.

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);

这篇关于如何将坐标添加到SVG折线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！