html - 在不知道原始颜色的情况下在悬停时减轻 svg 部分

Question

好的，所以我制作了一个带有 Angular 和 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 完成吗，还是我需要以某种方式将该属性映射到 Angular 代码？

Answer 1

你可以使用:

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