On Thu, 25 Oct 2007 04:00:33 +0200, todaius2003 <[EMAIL PROTECTED]> wrote:
> Hi, > > I would like to know how to read a value of a property in a css class > from svg using javascript. > > Specifically, I would like to retrieve the font-size of the text > element in the following example. > > This example includes two files: svg file, and a css file that the > svg file refers to. > > Thanks, > vn1977 > > //*********************svg file******************************* > <?xml version="1.0" standalone="no"?> > <?xml-stylesheet href="commonMap.css" type="text/css"?> > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG > 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> > <svg id="mainMap" width="950" height="475" > viewBox="-82.049332 -30.5758 0.667485000000013 > 0.471659000000002" > xmlns:xlink="http://www.w3.org/1999/xlink";> > > <script language="text/ecmascript" > > <![CDATA[ > ]]> > </script> > <text x="="-81.9332 " y="-30.2758" > class ="FreewayText" > > Hello, out there > </text> > </svg> > //*******************end of svg file************************* I think you'll run into less problems if your viewBox is made a bit bigger. '<text x="="-81.9332 "' obviously should be '<text x="-81.9332"' if you want it to work. '<script language="text/ecmascript"' should be '<script type="text/ecmascript"'. You should add 'xmlns="http://www.w3.org/2000/svg";' on the svg root element. > =================================================== > //*****************commonMap.css > file*************************************** > *.FreewayText > { > text-anchor: middle; > font-family:Verdana; > font-size: 0.001; > color: black; > } > //***************end of css file******************************** You must specify font-size using a unit, otherwise it will be ignored, 0.001px will do. Here is my take on your files, which works fine in Opera 9 and Firefox 2: //*********************svg file******************************* <?xml version="1.0" standalone="no"?> <?xml-stylesheet href="commonMap.css" type="text/css"?> <svg id="mainMap" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; onload="getStyle()"> <script type="text/ecmascript"> <![CDATA[ function getStyle() { var style = getComputedStyle(document.getElementById("t"),null); alert(style.getPropertyValue("font-size")); } ]]> </script> <text id="t" x="50" y="50" class="FreewayText">Hello, out there</text> </svg> //*******************end of svg file************************* //*****************commonMap.css *.FreewayText { text-anchor: middle; font-family:Verdana; font-size: 10px; color: black; } //***************end of css file******************************** More reading, if you're curious: http://www.w3.org/TR/DOM-Level-2-Style/ Cheers /Erik -- Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ ----- 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/ <*> 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:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] <*> 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/
