Bart and Holger,
in order to talk asv3 into realizing stylesheet modifications you'll
have to repace the entire stylesheet. At least that's how I did it
back then. Admittedly this solution is dead slow. Well, it's faster
than walking the dom, that's something at least.
Here's your code (that did work with asv3):
/********************************************************************
********
*
* FUNC: setClassPropertys(arLi)
*
* DESC: arLi: array of array (arLi[0]:sClass, arLi[1]:sProp, arLi
[2]:sValue);
*
* HIST: Jan 23 2003 PW created
*
* MISC:
*
* RETN: true/false
*********************************************************************
*******/
function setClassPropertys(arLi){
try{
var fRet= false;
if(arguments.length==1){
var regEx = new RegExp("[\*]|[\[&]class|[\]]","gim");
var svgRoot= oSvgDocument.documentElement;
var elmStyles = svgRoot.getElementsByTagName ("style");
for (var i = 0; i < elmStyles.length; i++ ) {
elmStyle = elmStyles.item(i);
//elmStyle.sheet.disabled= "true";
var sStyleTxt= "";
var sRules = elmStyle.sheet.cssRules||null;
var nWatch= 1000;
while ((sRules.length>0)&&(nWatch-->0)){
try{
for (var idx=(arLi.length-1); idx>=0; idx--){
var sItemsClsSel= "*[class." + arLi[idx][0] + "]";
if (sRules.item(0).selectorText==sItemsClsSel){
sRules.item(0).style.setProperty(arLi[idx][1], arLi[idx][2]);
arLi.splice(idx, 1);
}
}//for
sSelectorText= sRules.item(0).selectorText.replace(regEx, "");
sStyleTxt+= sSelectorText;
sStyleTxt+= (" {" + sRules.item(0).style.cssText + "}\n");
elmStyle.sheet.deleteRule(0);
}catch(e){alert(e.description);}
}// while (sRules.length>0)
try{
var li= null;
while(li= arLi.pop()){
sStyleTxt+= ("." + li[0] + " {" + li[1]+ ":" + li[2] + "}\n");
}
}catch(e){alert(e.description);}
//elmStyle.sheet.disabled= "false";
var elmStyleNew = elmStyle.cloneNode(false);
var child= oSvgDocument.createTextNode("");
child.nodeValue= sStyleTxt;
//alert(child.nodeValue);
elmStyleNew.appendChild(child);
svgRoot.replaceChild(elmStyleNew, elmStyle);
}//for (var i = 0; i < elmStyles.length; i++ )
}
fRet= true;
}catch(e){alert(e.description);}
return fRet;
}//function setClassPropertys()
The param arLi is supposed to be an array like:
var arLi= new Array();
...
var aLi= new Array();
aLi[0]= oCheckBox.parentNode.id;// ss class name
aLi[1]= "display"; // s prop
aLi[2]= oCheckBox.checked?"inline":"none"; //s val
arLi.push(aLi);
...aso.
hth
Paul
--- In [email protected], Holger Will <[EMAIL PROTECTED]>
wrote:
> Bart schrieb:
>
> > On 7/19/05, Holger Will <[EMAIL PROTECTED]> wrote:
> > > Bart schrieb:
> > >
> > > > Hey all,
> > > >
> > > > Does anyone know wheter it is possible to alter/set a CSS
class'
> > > > contents to change the styling of all elements that use that
class?
> > > > I would like to alter the stroke width on many d's, and it
seemed it
> > > > would be easiest to set a single class and alter that
instead of
> > > > walking the entire svg file with the DOM and setting
attributes.
> > > >
> > >
> > > hi bart
> > > yes and no, yes you can edit the style definition of a class
or other
> > > selector, but no that will not cause any visible change.
> > > you need to walk the whole dom and reapply the classes on all
elements.
> > > the best thing i think is to use inheritance where ever
possible.
> >
> > You're saying I need to both change the class and walk the DOM?
> > Thing is, I want to calculate that width every zoom.
> > So what's the code for changing the class definition?
> >
> > Souds workable. So assuming I have only d's, eg.
> > g.regular d { stroke-width:1 }
> > g.highlit d { stroke-width:3 }
> > in the css, and setAttributing the class on the g's, I suppose.
> >
> >
> > Thanks,
> > --Bart
>
> hi Bart
> to change a style declaration, do this:
> st=document.getElementsByTagNameNS
("http://www.w3.org/2000/svg","style";).item(0)
> st.sheet.cssRules.item(1).style.setProperty("fill","red","")
> however this will only work in mozillas native svg
implementation, it
> does not work in ASV3/6. or better it works, but does not cause
any
> visual change. you have to reapply the classes like this:
> document.getElementById("rect").setAttribute("class","st1")
> sure there is no reason to do so in ASV, because you could also
just do
> document.getElementById("rect").setAttribute("fill","red")
>
>
> here is a complete example:
>
> <?xml version="1.0" standalone="no"?>
> <svg
> xmlns="http://www.w3.org/2000/svg";
> xmlns:xlink="http://www.w3.org/1999/xlink";
> fill-rule="evenodd"
> >
> <title>svg+javascript</title>
> <script><![CDATA[
> function changeStyleDcl(){
> st=document.getElementsByTagNameNS
("http://www.w3.org/2000/svg","style";).item(0)
> st.sheet.cssRules.item(1).style.setProperty("fill","red","")
> //you will have to uncomment the following line , to see the
changes in
> ASV3 and ASV6
> //document.getElementById("rect").setAttribute("class","st1")
> }
> ]]></script>
>
> <style type="text/css">
> <![CDATA[
> .st0 {stroke:#000000;fill:#ffffff}
> .st1 {stroke:#000000;fill:green}
> ]]>
> </style>
>
> <defs>
> </defs>
>
> <rect id="rect" onclick="changeStyleDcl()" class="st1" x="100"
y="300"
> width="100" height="100" />
>
> </svg>
>
> hth
> Holger
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-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/
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
