使用SVG多边形元素
使用SVG多边形元素
提问于 2010-01-28 11:44:02
我正在尝试使用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“属性重新构造为一个字符串。
谢谢
回答 4
Stack Overflow用户
回答已采纳
发布于 2010-01-28 12:29:43
恐怕没有办法绕过它。您必须重新构造字符串。但是，将所有内容包装在一个对象中并不困难，例如：
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*不是最好的实现，但你明白了。
Stack Overflow用户
发布于 2010-01-28 14:22:04
您可以使用SVG DOM访问各个点值：
var p = polygon.points.getItem(1);
p.x = 150;
p.y = 300;(假设您的UA实现了此接口。)请参阅SVGPolygonElement、SVGAnimatedPoints、SVGPointList和SVGPoint。
但我发现，使用这些SVG DOM接口(至少对我来说是在Batik中，我在Batik中完成了大部分SVG工作)通常不会比仅仅使用字符串操作更新属性更快。
Stack Overflow用户
发布于 2010-01-28 11:47:00
您需要使用setAttributeNS。您可能希望将该名称空间缓存在某个变量中，这样就不必一直键入它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2152161
复制相关文章
相似问题