[lnkForumImage]
TotalShareware - Download Free Software
Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

setting attributes from a namespace

Jay Braun

9/20/2015 5:12:00 PM

I have a Javascript application where images are being displayed using SVG.

The following works:

I define the namespace, e.g.:
var xmlns = "http://www.w3.org/2000/...

I create each element with a reference to the namespace, e.g.:
var elem = document.createElementNS (xmlns, "path");

And then I assign attributes in this manner:
elem.setAttributeNS(null, "fill", fillcolor); //fillcolor has been assigned

This all works great. I wanted to see if my app would execute faster if I replaced the attribute assignment with something like:
elem.fill = fillcolor;

In other words, perhaps reducing the amount of text that the interpreter has to process, as well as reducing the number of function calls, might speed things up. But the elements are not drawn. The browser console indicates no syntax errors.

Must I use setAttributeNS to make use of the SVG specification?

Jay
3 Answers

Martin Honnen

9/20/2015 6:44:00 PM

0

Jay Braun wrote:
> I have a Javascript application where images are being displayed using SVG.
>
> The following works:
>
> I define the namespace, e.g.:
> var xmlns = "http://www.w3.org/2000/...
>
> I create each element with a reference to the namespace, e.g.:
> var elem = document.createElementNS (xmlns, "path");
>
> And then I assign attributes in this manner:
> elem.setAttributeNS(null, "fill", fillcolor); //fillcolor has been assigned
>
> This all works great. I wanted to see if my app would execute faster if I replaced the attribute assignment with something like:
> elem.fill = fillcolor;
>
> In other words, perhaps reducing the amount of text that the interpreter has to process, as well as reducing the number of function calls, might speed things up. But the elements are not drawn. The browser console indicates no syntax errors.
>
> Must I use setAttributeNS to make use of the SVG specification?

The SVG DOM is more complicated than the HTML DOM where most attributes
defined on HTML elements translate directly into element properties in
the DOM. There is no fill property defined.

You can try with the CSS DOM
elem.style.fill = fillcolor
but I am not sure how good the support for that is across user agents.

Jay Braun

9/20/2015 8:49:00 PM

0

> You can try with the CSS DOM
> elem.style.fill = fillcolor
> but I am not sure how good the support for that is across user agents.

My application draws geometric shapes, including arcs and paths, with lines of various dash patterns. Does the CSS DOM support this?

But, getting back to my original question, does the object.attribute or object["attribute"] notation (the latter when the attribute name contains a hyphen) work when one is using the SVG DOM?

What is the generally accepted limit on the number of elements that a browser can draw using SVG or Canvas?

Jay

Martin Honnen

9/21/2015 9:18:00 AM

0

Jay Braun wrote:
>> You can try with the CSS DOM
>> elem.style.fill = fillcolor
>> but I am not sure how good the support for that is across user agents.
>
> My application draws geometric shapes, including arcs and paths, with lines of various dash patterns. Does the CSS DOM support this?

My suggestion is simply meant as an alternative to your attempt of
elem.fill = fillcolor
which does not work as there is no "fill" property defined on SVG
elements. However
elem.style.fill = fillcolor
is defined and works, at least in a test with
http://jsfiddle.net... and current versions of Firefox, IE,
Chrome and Edge on Windows 10. The shapes you will need to create as you
currently do it with createElementNS.

> But, getting back to my original question, does the object.attribute or object["attribute"] notation (the latter when the attribute name contains a hyphen) work when one is using the SVG DOM?

Due to the complexity of possible attribute values in SVG and the need
to support a declarative change in the form of transitions I think there
are few attributes exposed as settable properties in the SVG DOM. There
are readonly attributes, for instance a "rect" element according to
http://www.w3.org/TR/SVG11/shapes.html#InterfaceSVGR... has

readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
readonly attribute SVGAnimatedLength rx;
readonly attribute SVGAnimatedLength ry;


So with script you can access
rectElem.width
but it is an object with properties baseVal and animVal which are again
objects.
I tried setting
rectElem.width.baseVal.value = 200
in http://jsfiddle.net... and Firefox, IE, Chrome and Edge change
the width of the SVG rect element object so that might also be an
approach to manipulate such values.
Whether it is widely supported I don't know and I have not run any tests
whether it performs in any way better that doing setAttribute or
setAttributeNS, which I think was your original question.