Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #28701 > unrolled thread

setting attributes from a namespace

Back to article view | Back to comp.lang.javascript

Contents

  setting attributes from a namespace Jay Braun <lyngwyst@gmail.com> - 2015-09-20 10:11 -0700
    Re: setting attributes from a namespace Martin Honnen <mahotrash@yahoo.de> - 2015-09-20 20:44 +0200
      Re: setting attributes from a namespace Jay Braun <lyngwyst@gmail.com> - 2015-09-20 13:49 -0700
        Re: setting attributes from a namespace Martin Honnen <mahotrash@yahoo.de> - 2015-09-21 11:18 +0200

#28701 — setting attributes from a namespace

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/svg";

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

   

[toc] | [next] | [standalone]

#28702

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/svg";
>
> 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.

[toc] | [prev] | [next] | [standalone]

#28703

> 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

[toc] | [prev] | [next] | [standalone]

#28704

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/ng4n3k8k/ 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#InterfaceSVGRectElement 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/pxmndL57/ 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.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web