Question

我有一堆SVG圈子，向学生展示他们在课堂上的进步。有3个不同的指标：

预期进度 - 您应该按时间完成多少课程，以百分比显示
工作质量 - 您的典型成绩＆＃34; 80％＆＃34;，您已经得到10个问题中的8个正确
最终成绩 - 百分比。随着时间的推移，工作质量的混合。如果时间到了而你还没有完成，即使你有100％的质量得分，你的最终得分非常低。

我希望在＆＃34;标注＆＃34;中描述这些指标但我无法访问除最顶级svg圈外的所有人。 CSS无法访问其他圈子......任何想法？：https://codepen.io/lucasOnCodePen/pen/gxjvjo

CSS：

circle.final:hover, circle.completed:hover, circle.expected:hover {
   stroke-width: 25;
}

JS：

$(document).ready(function() {
    var svgCircles = $(".circle svg");
    svgCircles.each(function() {
    var realPercent = $(this).data("percent") / 100;
    var offSet = 370 - 370 * realPercent;
    $(this).addClass("filled");
    $(this).css("stroke-dashoffset", offSet);
   });
});

我也非常愿意接受有关演示文稿的其他想法。这些指标很不稳定，但除了向用户解释之外，我无法做很多事情。

Answer 1

CSS可以访问每个圈子，而不仅仅是最上面的圈子。问题是z-index。即使视觉圆圈（<svg>和<circle>）都没有完全相互覆盖，它们仍然是相等大小的方块。这意味着:hover仅针对最大z-index的圈子触发。

也许，在这种情况下，canvas可能是更好的解决方案。但它还需要更多的js。

访问Stacked SVG＆＃39; s：hover或ON MouseEnter

1 个答案: