addClass function on a SVG circle doesnt work

addClass function on a SVG circle doesnt work

Hi,

i have the following test code in my html page

  1. <div id="drawingArea">
  2.     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700" height="400"> 
  3.         <circle id="example" cx="335.4999" cy="234.38927" r="8" style="cursor: move;" fill-opacity="0.1"></circle> 
  4.     </svg> 
  5. </div>
It draws a simple circle. 

So, after document is loaded, i will give the circle a click event and it should add a css class.

  1. <script language="javascript" type="text/javascript">
  2.     
  3.     $(document).ready(function() 
  4.     { 
  5.         $('#example').click(function() 
  6.         { 
  7.            $('#example').addClass ( 'test_adsdsasadsasadsadsdsa' ); 
  8.            alert ( 'fooo' );
  9.         }); 
  10.     });
  11. </script>
The alert with foo is OK, but no attributes of the css definition are working.

The css class is 

  1. .test_adsdsasadsasadsadsdsa
  2. {
  3.     fill: #E50B1D; /* Fill color */
  4.     fill-opacity: 1; /* Fill strength */
  5.     stroke-width: 4; /* Border width */
  6. }

Iam using Raphael and add the same question in their google group too, but they said, its jquery specific. I think, jquery doesnt found my circle. Maybe different id - handling between SVG-specific and plain DOM elements? I have no idea :(

Thanks for help!

greetings