Abdula Magomedov

visibility: hidden срабатывает первым. Поэтому исчезает. А анимация работает на opacity

Можете на него задержку добавить.

.menu-wrap {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: opacity 1s ease, visibility 0s linear 1s;
z-index: 100;
}

.menu-wrap.open {
visibility: visible;
opacity: 1;
transition: opacity 1s ease;
}

https://codepen.io/anon/pen/GPJLWQ

Или можете вместо скрытия через visibility: hidden, использовать pointer-events: none;

https://jquery-docs.ru/event.stopPropagation/

Так же как и у других элементов.
Конкретно в вашем случае:

let rect = document.querySelector('#mask > rect');
rect.style.fill = "rgba(255, 255, 255, 0.30)";

UPD. Сразу не понял вопроса. Точнее первую строчку не дочитал. Вот:

svg:hover #mask > text {
    fill: rgb(125,125,125);
}

добавь нужные селекторы, и делай красиво. Тут я просто возможности css показал.

https://codepen.io/anon/pen/bjWPjb

Вот. Если хочешь узнать почему именно так, то пиши на почту.
PS. Проконсультирую бесплатно. Расскажу тонкости работы с inline-block. И почему лучше использовать rem вместо em на примере конкретно этой твой задачи.

display: inline;
поменяй на
display: inline-block;

Не очень понял. text-overflow: чем не подходит?

Или дайте ссылку на песочницу

display: inline-flex;

float: right;
OR

display: flex;
justify-content: flex-end;

flex-wrap: wrap;

davidstutz.github.io/bootstrap-multiselect