blocks|key|1130406|text|您需要使用setAttributeNS。您可能希望将该名称空间缓存在某个变量中，这样就不必一直键入它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1130407|entityMap^0|5|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

You need to use <code>setAttributeNS</code>. You'll probably want to cache that namespace in a variable somewhere so you don't have to keep typing it.

blocks|key|1130441|text|您需要一次设置所有点，性能非常稳定，您可能希望在外部管理阵列并将其合并到setAttribute调用中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1130442|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You need to set all points at once, the performance is pretty solid, what you may want to do is manage the array outside and merge it on the setAttribute calls

blocks|key|1130483|text|恐怕没有办法绕过它。您必须重新构造字符串。但是，将所有内容包装在一个对象中并不困难，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1130484|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%2B%2B)+{
++++++++++++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%2B=2)+{
++++++++++pointList.push([arguments[i],arguments[i%2B1]]);
++++++}
++++++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|code-block|syntax|javascript|1130485|*不是最好的实现，但你明白了。|1130486|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

No way around it I'm afraid. You have to reconstruct the string again. But it's not difficult to wrap the whole thing in an object, something like:

<pre><code>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&lt;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&lt;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
</code></pre>

* not the best implementation but you get the idea.

blocks|key|1130582|text|您可以使用SVG+DOM访问各个点值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1130583|var+p+=+polygon.points.getItem(1);
p.x+=+150;
p.y+=+300;|code-block|syntax|javascript|1130584|(假设您的UA实现了此接口。)请参阅SVGPolygonElement、SVGAnimatedPoints、SVGPointList和SVGPoint。|offset|length|style|CODE|1130585|但我发现，使用这些SVG+DOM接口(至少对我来说是在Batik中，我在Batik中完成了大部分SVG工作)通常不会比仅仅使用字符串操作更新属性更快。|1130586|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.w3.org/SVG/profiles/1.1F2/publish/shapes.html#InterfaceSVGPolygonElement|1|http://dev.w3.org/SVG/profiles/1.1F2/publish/shapes.html#InterfaceSVGAnimatedPoints|2|http://dev.w3.org/SVG/profiles/1.1F2/publish/coords.html#InterfaceSVGPointList|3|http://dev.w3.org/SVG/profiles/1.1F2/publish/coords.html#InterfaceSVGPoint^0|0|0|I|H|10|H|1I|C|1V|8|I|H|0|10|H|1|1I|C|2|1V|8|3|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@$I|15|J|16|K|L]|$I|17|J|18|K|L]|$I|19|J|1A|K|L]|$I|1B|J|1C|K|L]]|9|@$I|1D|J|1E|1|1F]|$I|1G|J|1H|1|1I]|$I|1J|J|1K|1|1L]|$I|1M|J|1N|1|1O]]|A|$]]|$1|M|3|N|5|6|7|1P|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]|Y|$5|R|S|T|A|$U|Z]]|10|$5|R|S|T|A|$U|11]]]]

You can access the individual point values using the SVG DOM:

<pre><code>var p = polygon.points.getItem(1);
p.x = 150;
p.y = 300;
</code></pre>

(Assuming that your UA implements this interface.) See <a href="http://dev.w3.org/SVG/profiles/1.1F2/publish/shapes.html#InterfaceSVGPolygonElement" rel="noreferrer"><code>SVGPolygonElement</code></a>, <a href="http://dev.w3.org/SVG/profiles/1.1F2/publish/shapes.html#InterfaceSVGAnimatedPoints" rel="noreferrer"><code>SVGAnimatedPoints</code></a>, <a href="http://dev.w3.org/SVG/profiles/1.1F2/publish/coords.html#InterfaceSVGPointList" rel="noreferrer"><code>SVGPointList</code></a> and <a href="http://dev.w3.org/SVG/profiles/1.1F2/publish/coords.html#InterfaceSVGPoint" rel="noreferrer"><code>SVGPoint</code></a>.

I find though that using these SVG DOM interfaces (at least for me in Batik, in which I do most of my SVG stuff) is often not faster than just updating the attribute with string manipulation.

I'm trying to work with an SVG polygon and javascript. I create a polygon and set its initial point list like this:

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

now what do I do if I want to modify the 2nd point (100,100)? Right now I'm basically reconstructing the whole string again. But can we address "polygon.points" as an array somehow, or is it really just a plain simple string? This can work ok for very simple polygons, but if my polygon eventually has hundreds of point pairs, I'd hate to reconstruct the entire "points" attribute as a string every time I want to modify a single element.

Thanks

Working with SVG polygon elements

我正在尝试使用SVG多边形和javascript。我创建了一个多边形，并像这样设置了它的初始点列表：var polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');polygon.setAttribute("points", ...

问使用SVG多边形元素
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用SVG多边形元素EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用SVG多边形元素
EN