Изменение цвета другого элемента svg в группе

Question

Я пытаюсь использовать css для изменения цвета элемента svg при его зависании, но также и для изменения цвета одного и того же элемента, когда другой элемент группы зависнет.

Код для группы является SVG:

<g id="Locations"> 
     <g id="Viner_Gallery"> 
      <path id="vinerGalleryQ" fill="#FFFFFF" stroke="#FFFFFF" stroke- miterlimit="10" d="M281.199,341.615c0,0-1.607,0-16.165,0 
       c-8.927,0-16.165-7.237-16.165-16.165c0-8.928,7.237-16.165,16.165-16.165c8.928,0,16.165,7.237,16.165,16.165 
       c0,3.792-1.306,7.278-3.492,10.036L281.199,341.615z"/> 
      <polygon id="vinerGalleryPoly" fill="#4D4D4D" points="264.973,315.891 255.245,332.141 274.495,332.141  "/> 
     </g> 
</g> 

Я хочу изменить цвет #vinerGalleryQ когда завис над, но я также хочу, чтобы изменить цвет #vinerGalleryQ когда #vinerGalleryPoly завис над.

Я пробовал jQuery, который я бы предпочел css, но я не могу сделать эту работу вообще - видимо, есть некоторые проблемы с jQuery и svg?

Answer 1

Это, как вы можете это сделать:

.rect1 { 
 
    fill: red; 
 
} 
 

 
.rect2 { 
 
    fill: green; 
 
} 
 

 
g:hover .rect1 { 
 
    fill: orange; 
 
}

<svg> 
 
    <g> 
 
    <rect class="rect1" width="140" height="150"/> 
 
    <rect class="rect2" x="150" width="140" height="150"/> 
 
    </g> 
 
</svg>