dynamically change gradient stop using className

[root2art]

hello,

i'm trying to loop through a bunch of lineargradient defs and dynamically change the stop-color values of those with a specified class name. i've tried both the approaches at bottom of message with no joy. the function arguments are being passed ok as i have tested successfully grabbing element by ID with the following:

function ChangeStopColor(color, stopID){
      SVGDocument.getElementById("gradStopID").setAttribute("stop-color", color);
   }


this is what i've tried:

function ChangeStopColor(color, stopID) {
     var colrStops = new Array();
     var colrStops = SVGDocument.getElementsByTagName("stop");
     for (i=0; i<colrStops.length; i++) {
     if (colrStops[i].className=='stop'+stopID) {
      colrStops[i].setAttribute("stop-color", color);
      }
     }
    }
 


and this:


function ChangeStopColor(color, stopID)
   {
     var colrStops = new Array();
     var colrStops = SVGDocument.getElementsByTagNameNS(svgNS,"stop");
     for (i=0; i<colrStops.length; i++) {
     if (colrStops[i].className=='stop'+stopID) {
      colrStops[i].setAttributeNS(null,"stop-color", color);
      }
     }
    }


i read it was not possible to make dynamic changes to a class via a style sheet that is reflected in an object of that class. if i've got this wrong, could this be another option?

many thanks

harvey

[Francis Hemsher-3]

Hi Harvey,
I haven't tested this, but can't you treat class as just another attribute?
e.g.
function ChangeStopColor(color, stopID) {
var colrStops = new Array();
var colrStops = SVGDocument.getElementsByTagName("stop");
for (i=0; i<colrStops.length; i++) {
if (colrStops[i].getAttribute("class")=='stop'+stopID) {
colrStops[i].setAttribute("stop-color", color);
}
}
}

Francis

--- In svg-developers@..., "root2art" <h_@...> wrote:

>
> hello,
>
> i'm trying to loop through a bunch of lineargradient defs and dynamically change the stop-color values of those with a specified class name. i've tried both the approaches at bottom of message with no joy. the function arguments are being passed ok as i have tested successfully grabbing element by ID with the following:
>
> function ChangeStopColor(color, stopID){
>       SVGDocument.getElementById("gradStopID").setAttribute("stop-color", color);
>    }
>
>
> this is what i've tried:
>
> function ChangeStopColor(color, stopID) {
>      var colrStops = new Array();
>      var colrStops = SVGDocument.getElementsByTagName("stop");
>      for (i=0; i<colrStops.length; i++) {
>      if (colrStops[i].className=='stop'+stopID) {
>       colrStops[i].setAttribute("stop-color", color);
>       }
>      }
>     }
>  
>
>
> and this:
>
>
> function ChangeStopColor(color, stopID)
>    {
>      var colrStops = new Array();
>      var colrStops = SVGDocument.getElementsByTagNameNS(svgNS,"stop");
>      for (i=0; i<colrStops.length; i++) {
>      if (colrStops[i].className=='stop'+stopID) {
>       colrStops[i].setAttributeNS(null,"stop-color", color);
>       }
>      }
>     }
>
>
> i read it was not possible to make dynamic changes to a class via a style sheet that is reflected in an object of that class. if i've got this wrong, could this be another option?
>
> many thanks
>
> harvey
>

[Erik Dahlstrom]

On Thu, 15 Oct 2009 15:34:42 +0200, root2art <h_@...> wrote:

> hello,
>
> i'm trying to loop through a bunch of lineargradient defs and  
> dynamically change the stop-color values of those with a specified class  
> name. i've tried both the approaches at bottom of message with no joy.  
> the function arguments are being passed ok as i have tested successfully  
> grabbing element by ID with the following:
>
> function ChangeStopColor(color, stopID){
>       SVGDocument.getElementById("gradStopID").setAttribute("stop-color",  
> color);
>    }
>
>
> this is what i've tried:
>
> function ChangeStopColor(color, stopID) {
>      var colrStops = new Array();
>      var colrStops = SVGDocument.getElementsByTagName("stop");
>      for (i=0; i<colrStops.length; i++) {
>      if (colrStops[i].className=='stop'+stopID) {

SVGElement.className is an SVGAnimatedString object, you need to say which  
of the two values you want, in your example that would be either  
colrStops[i].className.baseVal or colrStops[i].className.animVal. That  
will give you the DOMStrings. It might be possible to map  
SVGElement.className directly to the baseVal DOMString in a future SVG  
spec, but it's not going to help in the short term.

You might also want to consider using the Selectors API instead, e.g var  
myclassElms = document.querySelectorAll(".yourclass");

And maybe if you change the color values to the same color for all of the  
matches you would be better off trying to modify the stylesheet rule  
directly, through the DOM Level 2 Style APIs. Or by creating a new css  
rule and changing the classname on the stops to that new rule.

An untested example:

var firstSheetRules = document.styleSheets[0].cssRules;
for(var i = 0; i < firstSheetRules.length; i++)
{
   if(firstSheetRules[i].selectorText == '.myclass')
   {
     firstSheetRules[i].style.setProperty('stop-color', 'rgb(1,2,3)' /* new  
value */, null);
   }
}

Hope this helps
/Erik

--
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed


------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe@...
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    mailto:svg-developers-digest@...
    mailto:svg-developers-fullfeatured@...

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe@...

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

[root2art]

thank you so much chaps for your time in giving your detailed suggestions.

actually, all your suggestions worked beautifully on ff and opera.
ie8+asv however gives one of the following similar error messages in each instance, all referring to the 'SVGDocument' or 'document' object.
i tried each method trying both 'document' and 'SVGDocument' in each instance.


ie8+asv error messages:-

"'className' is null or not an object" - referring to line: SVGDocument = LoadEvent.target.ownerDocument;

"undefined' is null or not an object" - referring to line: SVGDocument = LoadEvent.target.ownerDocument;

"'SVGDocument.styleSheets.0' is null or not an object" - referring to line: 'function Initialize(LoadEvent)' {


here is the relevant part of my svg script using Erik's last suggestion:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="400" viewBox="0 0 500 400" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     onload="Initialize(evt)">
     
     <script type="text/ecmascript">
  <![CDATA[

    SVGDocument = null;
        top.changeFillColor = ChangeFillColor;  
   
   function Initialize(LoadEvent) {
      SVGDocument = LoadEvent.target.ownerDocument;
      top.svgLoaded = 1;
   }
 
   function ChangeFillColor(color, stopID) {
 var firstSheetRules = document.styleSheets[0].cssRules;
for(var i = 0; i < firstSheetRules.length; i++) {
  if(firstSheetRules[i].selectorText == '.stop'+stopID) {
    firstSheetRules[i].style.setProperty('stop-color', color, null);
  }
 }
}
 
 ]]>
 </script>


i would prefer to use the svgWebKit for ie, but as far as i can tell this doesn't yet support gradientTransform, which i'm using extensively elsewhere.
i'm sure the examples you chaps offered are sound, i'm sure its some other problem being reveived here that i'm too dumb to see.

here is the project i am working on: http://www.patterncooler.com/patTest/spreadEditor.php that is currently using the above svg script.
this pattern editor which is still quite rudimentary will provide a new set of tools for http://www.patterncooler.com
which has become a fairly successful project thanks to svg:)

many many thanks:)

harvey


--- In svg-developers@..., "Erik Dahlstrom" <ed@...> wrote:

>
> On Thu, 15 Oct 2009 15:34:42 +0200, root2art <h_@...> wrote:
>
> > hello,
> >
> > i'm trying to loop through a bunch of lineargradient defs and  
> > dynamically change the stop-color values of those with a specified class  
> > name. i've tried both the approaches at bottom of message with no joy.  
> > the function arguments are being passed ok as i have tested successfully  
> > grabbing element by ID with the following:
> >
> > function ChangeStopColor(color, stopID){
> >       SVGDocument.getElementById("gradStopID").setAttribute("stop-color",  
> > color);
> >    }
> >
> >
> > this is what i've tried:
> >
> > function ChangeStopColor(color, stopID) {
> >      var colrStops = new Array();
> >      var colrStops = SVGDocument.getElementsByTagName("stop");
> >      for (i=0; i<colrStops.length; i++) {
> >      if (colrStops[i].className=='stop'+stopID) {
>
> SVGElement.className is an SVGAnimatedString object, you need to say which  
> of the two values you want, in your example that would be either  
> colrStops[i].className.baseVal or colrStops[i].className.animVal. That  
> will give you the DOMStrings. It might be possible to map  
> SVGElement.className directly to the baseVal DOMString in a future SVG  
> spec, but it's not going to help in the short term.
>
> You might also want to consider using the Selectors API instead, e.g var  
> myclassElms = document.querySelectorAll(".yourclass");
>
> And maybe if you change the color values to the same color for all of the  
> matches you would be better off trying to modify the stylesheet rule  
> directly, through the DOM Level 2 Style APIs. Or by creating a new css  
> rule and changing the classname on the stops to that new rule.
>
> An untested example:
>
> var firstSheetRules = document.styleSheets[0].cssRules;
> for(var i = 0; i < firstSheetRules.length; i++)
> {
>    if(firstSheetRules[i].selectorText == '.myclass')
>    {
>      firstSheetRules[i].style.setProperty('stop-color', 'rgb(1,2,3)' /* new  
> value */, null);
>    }
> }
>
> Hope this helps
> /Erik
>
> --
> Erik Dahlstrom, Core Technology Developer, Opera Software
> Co-Chair, W3C SVG Working Group
> Personal blog: http://my.opera.com/macdev_ed
>

[Francis Hemsher-3]

Hi Harvey,
After ie5/6, I used parent, rather than top. Actually I don't recall what problems i had with top, but anyway give it try, It may help.
Francis

--- In svg-developers@..., "root2art" <h_@...> wrote:

>
> thank you so much chaps for your time in giving your detailed suggestions.
>
> actually, all your suggestions worked beautifully on ff and opera.
> ie8+asv however gives one of the following similar error messages in each instance, all referring to the 'SVGDocument' or 'document' object.
> i tried each method trying both 'document' and 'SVGDocument' in each instance.
>
>
> ie8+asv error messages:-
>
> "'className' is null or not an object" - referring to line: SVGDocument = LoadEvent.target.ownerDocument;
>
> "undefined' is null or not an object" - referring to line: SVGDocument = LoadEvent.target.ownerDocument;
>
> "'SVGDocument.styleSheets.0' is null or not an object" - referring to line: 'function Initialize(LoadEvent)' {
>
>
> here is the relevant part of my svg script using Erik's last suggestion:
>
> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> <svg width="500" height="400" viewBox="0 0 500 400" version="1.1"
>      xmlns="http://www.w3.org/2000/svg"
>      xmlns:xlink="http://www.w3.org/1999/xlink"
>      onload="Initialize(evt)">
>      
>      <script type="text/ecmascript">
>   <![CDATA[
>
>     SVGDocument = null;
>         top.changeFillColor = ChangeFillColor;  
>    
>    function Initialize(LoadEvent) {
>       SVGDocument = LoadEvent.target.ownerDocument;
>       top.svgLoaded = 1;
>    }
>  
>    function ChangeFillColor(color, stopID) {
>  var firstSheetRules = document.styleSheets[0].cssRules;
> for(var i = 0; i < firstSheetRules.length; i++) {
>   if(firstSheetRules[i].selectorText == '.stop'+stopID) {
>     firstSheetRules[i].style.setProperty('stop-color', color, null);
>   }
>  }
> }
>  
>  ]]>
>  </script>
>
>
> i would prefer to use the svgWebKit for ie, but as far as i can tell this doesn't yet support gradientTransform, which i'm using extensively elsewhere.
> i'm sure the examples you chaps offered are sound, i'm sure its some other problem being reveived here that i'm too dumb to see.
>
> here is the project i am working on: http://www.patterncooler.com/patTest/spreadEditor.php that is currently using the above svg script.
> this pattern editor which is still quite rudimentary will provide a new set of tools for http://www.patterncooler.com
> which has become a fairly successful project thanks to svg:)
>
> many many thanks:)
>
> harvey

[Francis Hemsher-3]

Hi again, Harvey.
I looked at your site, it's a beauty!
I also ran you test example.

I don't understand (line 384 @ colorPicker.js):
if(svgLoaded == 1){window.changeFillColor(hex, activeColor)..

why use 'window' when the function is located in the SVG doc, and
given reference to this file, I assume.

I don't know the structure of the app, so you probably have a valid reason.

Anyway, just a thought.

Francis

<fhemsher@...> wrote:
>
> Hi Harvey,
> After ie5/6, I used parent, rather than top. Actually I don't recall what problems i had with top, but anyway give it try, It may help.
> Francis
>

[root2art]

hi francis and erik, many thanks for persevering with my stupidity:)

generally, i don't know what i am doing, is the simple answer to your question francis:) the only scripting experience i have is with the patterncooler site and i'm just learning as i go along. i have a very clear idea of what it is i want to do and just keep trying stuff and bodging script together until it works. every once and a while though i do hit a brick wall where my lack of real understanding shows up.

i've tried Erik's previous suggestions using 'parent' and have removed window from the colorPicker script but to no avail. there are many other things i have tried, which are probably too dumb to mention. the thing is the svg script works fine when using SVGDocument.getElementById('poo') to change various attributes in ie+asv. i'm wondering if SVGDocument.getElementsByTagName and SVGDocument.styleSheets are just not supported properties of the adobe viewer SVGDocument object. (is this the right way to express it?). can i add these properties if not?

i'm trying to find relevant documentation to clarify this - or maybe i could print the supported properties ...?





--- In svg-developers@..., "Francis Hemsher" <fhemsher@...> wrote:

>
> Hi again, Harvey.
> I looked at your site, it's a beauty!
> I also ran you test example.
>
> I don't understand (line 384 @ colorPicker.js):
> if(svgLoaded == 1){window.changeFillColor(hex, activeColor)..
>
> why use 'window' when the function is located in the SVG doc, and
> given reference to this file, I assume.
>
> I don't know the structure of the app, so you probably have a valid reason.
>
> Anyway, just a thought.
>
> Francis
>
> <fhemsher@> wrote:
> >
> > Hi Harvey,
> > After ie5/6, I used parent, rather than top. Actually I don't recall what problems i had with top, but anyway give it try, It may help.
> > Francis
> >
>

[Francis Hemsher-3]

--- In svg-developers@..., "root2art" <h_@...> wrote:
>
 i have a very clear idea of what it is i want to do and just keep trying stuff and bodging script together until it works.> >

Ditto, Bro.
 
> i'm trying to find relevant documentation to clarify this - or maybe i could print the supported properties ...?
>

I made an attempt to show the ASV/IE DOM methods and properties supported.

See: http://www.mobiusPortal.com

Keep on truckin',
Francis