Вы забыли добавить необходимый селектор +
:
<!DOCTYPE html>
<html>
<style>
#c1:hover + #c2 {
fill: red;
}
</style>
<body>
<svg width="500" height="500">
<circle id="c1" cx="150" cy="150" r="80" stroke="green" stroke-width="4" fill="yellow" />
<circle id="c2" cx="350" cy="350" r="80" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Рекомендуется тщательнее продумывать разметку и использовать соответствующие селекторы:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
svg {
height: 100vh;
}
#c1 {
cursor: pointer;
fill: blue;
}
#ab {
transition: 300ms;
cursor: pointer;
stroke: #491EC4;
stroke-width: 3;
}
#toab {
transition: 300ms;
cursor: pointer;
fill: blue;
}
#c1:hover~#ab {
stroke: #008000;
}
#toab:hover~#ab {
stroke: #008000;
}
#ab:hover {
stroke: #cb0412;
}
</style>
</head>
<body>
<div class="f1">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 700 700" height="100vh">
<circle id="c1" cx="300" cy="100" r="20" />
<text id="toab" x="50" y="80"> AB </text>
<line id="ab" x1="50" y1="50" x2="400" y2="50" />
</svg>
</div>
</body>
</html>