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


Groups > comp.lang.javascript > #28704

Re: setting attributes from a namespace

From Martin Honnen <mahotrash@yahoo.de>
Newsgroups comp.lang.javascript
Subject Re: setting attributes from a namespace
Date 2015-09-21 11:18 +0200
Organization Liberty Development
Message-ID <mtoi10$dib$1@news.albasani.net> (permalink)
References <43eec4db-3acf-4840-bfd0-af2ea843a69d@googlegroups.com> <mtmupq$das$1@news.albasani.net> <7547e615-a20c-4569-9d80-b2bbf3289989@googlegroups.com>

Show all headers | View raw


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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread


Thread

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

csiph-web