Облегчить часть SVG при наведении, не зная оригинального цвета

Question

Хорошо, я сделал круговую диаграмму с углами и SVG. Выглядит хорошо, но не очень хорошо реагирует на парящие события.

<path (click)="pieClick(cat)" class="slice" [attr.fill]="getColor(i)" [attr.d]="getArc()"></path>

Это путь, который рисует кусок пирога. здесь следует отметить, что цвета должны быть получены с внутреннего сервера, поэтому я не могу просто жестко закодировать это в CSS.

CSS, который у меня сейчас есть, выглядит следующим образом

.slice {
    cursor: pointer;
}

.slice:hover {
    fill: #333;
}

И это работает, но желательно, чтобы я просто осветлял цвет при наведении, вместо того, чтобы устанавливать его на #333.

Можно ли это сделать с помощью чистого CSS или мне нужно каким-то образом сопоставить это свойство с угловым кодом?

Answer 1

Вы можете использовать:

-webkit-filter: brightness(1.5);
-moz-filter: brightness(1.5);
-ms-filter: brightness(1.5);
filter: brightness(1.5);

Answer 2

Вы могли бы сделать это, создав белый div впереди и добавив альфа-канал, чтобы сделать его частично прозрачным.

Попробуйте запустить фрагмент ниже и посмотрите, будет ли он делать то, что вам нужно.

.box {
  width: 100px;
  height: 100px;
}
.box:hover::after {
  content: "";
  background-color: rgba(255,255,255,0.25);
  width: 100%;
  height: 100%;
  display: block;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.black {
  background-color: black;
}
.yellow {
  background-color: yellow;
}

<div class="box red"></div>
<div class="box blue"></div>
<div class="box black"></div>
<div class="box yellow"></div>