css - 使用 SVG 组件的 css 样式，使可见性为 "sticky"

Question

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

我已使用 css 管理此操作，根据同级触发器对象的鼠标悬停，将目标对象的 visibility 样式设置为可见。

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

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

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

<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>

注意编辑原始代码以反射(reflect)答案中提供的信息。

Answer 1

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

如果您希望对多个元素进行悬停和单击，最好的选择是使用 javascript。尽管可以使用复选框来完成，但如果您愿意放弃 SVG，如下所示:

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