Сделайте видимость «липкой» при клике, используя CSS-стили SVG-компонентов - PullRequest
Новая
       10

Сделайте видимость «липкой» при клике, используя CSS-стили SVG-компонентов

0 голосов
/ 25 апреля 2019

Я хочу создать SVG-изображение, содержащее компоненты, раскрывающие дополнительный контент при наведении мыши.

Я справился с этим с помощью css, чтобы установить стиль visibility видимым для целевого объекта, основываясь на наведении курсора на объект триггера.

То, что я сейчас хотел бы сделать, это исправить атрибут видимости при щелчке, чтобы при щелчке в другом месте видимость снова становилась скрытой. Если бы я мог заставить это работать, то я мог бы раскрыть контент по клику для нескольких элементов, не прибегая к какому-либо javascript.

Я рассмотрел возможность перекодирования с использованием объектов форм, таких как переключатели и т. Д., Но предпочел бы гибкость компоновки, обеспечиваемую необработанным SVG, поскольку я хочу иметь возможность располагать активные элементы как можно точнее.

Ниже показано окно с типом выноски, но это происходит только при наведении мыши. Нажатие, чтобы установить фокус на круге триггера, приводит к рестайлингу поля выноски, но я хочу, чтобы видимость оставалась «липкой», чтобы после прекращения зависания мыши она оставалась видимой. В настоящее время при удалении мыши от круга поле выноски исчезает. 

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

N.B. Исходный код отредактирован для отражения информации, представленной в ответе.

1 Ответ

1 голос
/ 26 апреля 2019

Похоже, что "видимое" написано неправильно в вашем правиле a:focus ~ #text_box_test (вам может понадобиться добавить tabindex="1" к вашему <a>, если ваш фокус не работает).

Если вы хотите, чтобы наведение и щелчок происходили для нескольких элементов, лучшим вариантом будет использование javascript. Хотя это можно сделать с помощью флажков, если вы хотите отойти от SVG, как показано здесь:

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

...