Good day to all. When designing the site, I ran into a problem with working with SVG. There is an SVG-scale of a similar structure:

<svg id="district"> <path id="black1"></path> <path id="black2"></path> <path id="white1"></path> <path id="white2"></path> </svg>

The task is to ensure that when you hover on # white1 to # black1 some class is added, through which I will change the original styles of this element. This way does not work:

 $('#white1').hover( function() { $('#black1').toggleClass('new'); } );

I understand that the specifics of working with svg elements in js is completely different. Please tell me how you can solve this problem?

1 answer 1

 $('svg path').hover( function(){ $(this).addClass('active').siblings().removeClass('active'); }, function(){ $(this).removeClass('active'); } ); 
 svg path.active { fill: #000; } 
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <svg viewBox="0 0 200 200" width="400"> <path d="M 0,0 100,0 100,100, 0,100 z" fill="green"></path> <path d="M 100,0 200,0 200,100, 100,100 z" fill="blue"></path> <path d="M 0,100 100,100 100,200, 0,200 z" fill="red"></path> </svg>