如何向SVG折线添加坐标？

Question

如何使用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文件中），需要能够动态地向折线添加新点。目标是能够创建一条折线图。提前道歉，我完全不知道如何引用这个属性。任何关于此的指导将不胜感激。

- TK421

Answer 1

如果您给折线添加一个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获取对它的引用。

最简单的方法是通过对“points”属性使用getAttribute/setAttribute来操作它。

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

但是最高性能的选项是SVG DOM，因为它避免了将点数据序列化为/从字符串 - 我所知道的所有UA都将数据存储为浮点数或双精度数组，而不是字符串。

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

- Robert Longson

---

发现在IE 9中（.hta文件）需要使用.createSVGPoint（）;。 http://msdn.microsoft.com/en-us/library/ie/ff972165%28v=vs.85%29.aspx - TK421

对于所有的UA来说，我已经在答案中修复了那个拼写错误。 - Robert Longson

@RobertLongson 我只是得到了“polyline.points未定义”的错误，而我是用document.createElementNS('http://www.w3.org/2000/svg', 'svg')创建元素的。 - ii iml0sto1

第三行需要写成 polyline.setAttribute('points', points);。 - Jordan

Answer 2

var polyline= document.getElementById('polyline-id')
  , points = polyline.getAttribute('points');

points += '12, 23'; // example
polyline.setAttribute('points', points );

如果折线已经被渲染，setAttributeNS 可能无法正常工作，因此您需要使用 setAttributeNS 和 getAttributeNS: https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttributeNS

另一个选项是使用一些库，比如 http://www.svgjs.com/ 或 http://snapsvg.io/

- Nik Terentyev

---

句子“可能无法工作”是不正确的。最初的建议将在折线是否呈现时都起作用。setAttributeNS 可能会导致错误，因为该属性位于 null 命名空间中。 - Robert Longson

非常感谢！我将使用svgjs，这会让事情变得更加容易！ - TK421

是的，我也更喜欢使用 SVG.js。不喜欢 Snap 设置拖放坐标时使用 transfer 属性。 - Nik Terentyev

谢谢，@RobertLongson。您的建议/更正总是受欢迎的！ - Nik Terentyev