Question

我正在尝试使用SVG多边形和javascript。我创建一个多边形并设置其初始点列表如下：

var polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
polygon.setAttribute("points", "0,0  100,100 200,200");

现在如果我想修改第二点（100,100）该怎么办？现在我基本上重新整理了整个字符串。但是我们可以将“polygon.points”作为一个数组以某种方式解决，还是只是一个简单的简单字符串？这对于非常简单的多边形可以正常工作，但是如果我的多边形最终有数百个点对，那么每次我想要修改单个元素时，我都讨厌将整个“points”属性重建为一个字符串。

由于

Answer 1

您可以使用SVG DOM访问各个点值：

var p = polygon.points.getItem(1);
p.x = 150;
p.y = 300;

（假设您的UA实现了此接口。）请参阅SVGPolygonElement，SVGAnimatedPoints，SVGPointList和SVGPoint。

我发现虽然使用这些SVG DOM接口（至少对我来说是Batik，我做了大部分的SVG工作）通常并不比仅使用字符串操作更新属性更快。

Answer 2

无所事事我害怕。你必须重新重建字符串。但是将整个事物包装在一个对象中并不困难，例如：

function Polygon () {
    var pointList = [];
    this.node = document.createElementNS('http://www.w3.org/2000/svg','polygon');
    function build (arg) {
        var res = [];
        for (var i=0,l=arg.length;i<l;i++) {
            res.push(arg[i].join(','));
        }
        return res.join(' ');
    }
    this.attribute = function (key,val) {
        if (val === undefined) return node.getAttribute(key);
        node.setAttribute(key,val);
    }
    this.getPoint = function (i) {return pointList[i]}
    this.setPoint = function (i,x,y) {
        pointList[i] = [x,y];
        this.attribute('points',build(pointList));
    }
    this.points = function () {
      for (var i=0,l=arguments.length;i<l;i+=2) {
          pointList.push([arguments[i],arguments[i+1]]);
      }
      this.attribute('points',build(pointList));
    }
    // initialize 'points':
    this.points.apply(this,arguments);
}

var polygon = new Polygon(0,0, 100,100, 200,200);
polygon.setPoint(0, 50,10); // set point and automatically re-build points
polygon.points(50,50, 50,100, 200,100); // set everything
polygon.node; // refer to the actual SVG element

*不是最好的实施，但你明白了。

Answer 3

您需要使用setAttributeNS。您可能希望将该命名空间缓存在某个变量中，这样您就不必继续输入它。

Answer 4

您需要一次设置所有点，性能非常稳定，您可能想要做的是在外部管理数组并将其合并到setAttribute调用

使用SVG多边形元素

4 个答案: