访问堆叠的SVG：悬停或打开鼠标输入

Question

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

1. 预期进度 - 有多少课程，你应该已经完成​​了，按时间，显示为百分比
2. 质量的工作 - 你的典型牌号有“80％”，你得到正确的10个问题中的8个
3. 最终成绩 - 以百分比表示。随着时间的推移工作质量的组合。如果 时间到了，你还没有完成，即使你有100％的质量分数，你的最终分数是非常低的。

我期待在“标注”中描述这些指标，但无法访问除最上面的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。