使用SVG组件的CSS样式，在点击时使可见性“粘滞”

Question

我想构建一个包含组件的SVG图像，这些组件在鼠标悬停时显示其他内容。

我已经使用css来管理这个，根据兄弟触发器对象的鼠标悬停，将visibility样式设置为目标对象可见。

我现在要做的是在点击时修复可见性属性 - 这样在其他地方点击会将可见性重置为隐藏。如果我可以让它工作，那么我将能够显示点击多个元素的内容，而无需借助任何JavaScript。

我曾考虑使用单选按钮等表单对象重新编码，但更喜欢原始SVG提供的布局灵活性，因为我希望能够尽可能精确地定位活动元素。

下面显示了一个callout-type框，但只在mouseover上执行。单击将焦点设置为触发器圆圈确实具有重新设置标注框的效果，但我希望可见性保持“粘性”，以便一旦鼠标停止悬停，它仍然可见。目前，在将鼠标移离圆圈时，标注框会消失。

<svg width="450" height="300">
    <style>
    #text_box_test{
    fill:#FFAAAA;
    }
    
    #hover_thing:hover ~ #text_box_test {
    visibility:visible;
    }
    
    #hover_thing:active ~#text_box_test {
    visibility:visible;
    fill:#AAFFAA;
    }
    
    div.white {
    #background-color:#FFFFFF;
    overflow-y: scroll;
    height: 100%;
    width: 100%;
    }
    
    a:focus ~ #text_box_test {
    fill: #77BBFF;
    fill-opacity: 1.0;
    outline: none;
    visibility:visible;
}
    </style>
    <g>
    <a id="hover_thing" xlink:href="#" tabindex="1">
    <circle id="hover_thing" cx="15" cy="150" r="10" stroke="black" stroke-width="3" fill="red" data-Name="shape 1" data-tabindex="0"/>
    </a>
            
            <g id="text_box_test" visibility="hidden">
            <path 
            stroke-width="3" 
            stroke="black"
            stroke-linejoin="miter"
            fill-opacity="0.85"
                  d="M 20 150 
                     l 40 -15
                     l 0 -75
                     a 10 10 0 0 1 10 -10
                     l 250 0
                     a 10 10 0 0 1 10 10
                     l 0 150
                     a 10 10 0 0 1 -10 10
                     l -250 0
                     a 10 10 0 0 1 -10 -10
                     l 0 -45 z"/>
            <foreignObject x="70" y="60" width="250px" height="150px">
            <div xmlns="http://www.w3.org/1999/xhtml" class="white">
                <h1 xmlns="http://www.w3.org/1999/xhtml">Header Shmeader</h1>
                <p xmlns="http://www.w3.org/1999/xhtml">Text goes here - If more text goes over a thing, then it wraps around. <br> <br> Any more and it may overflow. </p>
                <p xmlns="http://www.w3.org/1999/xhtml">Freddie was a little fish, his skin was nice and shiny, and everywhere that Freddie went, he tried to not get grimy. </p>
            </div>
            </foreignObject>
        </g>


        </g>
            </g>
    </svg>

注：编辑原始代码以反映答案中提供的信息。

Answer 1

它看起来像“在你的a:focus ~ #text_box_test规则中可见拼写错误（如果你的焦点不起作用，你可能需要将tabindex="1"添加到你的<a>）。

如果你想悬停并点击多个元素，你最好的选择是使用javascript。虽然可以使用复选框完成，但如果您愿意放弃SVG，如下所示：

https://codepen.io/anon/pen/VNqyQY?editors=1100