好的,所以我制作了一个带有 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 代码?
最佳答案
你可以使用:
-webkit-filter: brightness(1.5);
-moz-filter: brightness(1.5);
-ms-filter: brightness(1.5);
filter: brightness(1.5);
关于html - 在不知道原始颜色的情况下在悬停时减轻 svg 部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52110565/