在模式框打开之前更改 SVG 元素的颜色，并在框打开时保持该颜色

我想更改SVG元素的颜色，我单击以打开一个模态框。这似乎比其他情况下更困难，可能是因为我已经在使用 SVG 元素时进行了悬停行为。

Atm 当光标位于元素上时，元素是红色的并放大，但当我单击它以打开模态时，它会恢复为白色。如何在模态打开时将其保持红色，仅在模态关闭时变回白色？当我不单击任何内容时，我仍然想要我已经拥有的悬停行为。

asylumQ是Q形，AsylumTr是中间的一个洞。当鼠标悬停在 Q 或 Q 中的孔上时，Q 形状变为红色（这并不完美，但使用 js 将 2 个元素组合在一起不起作用，并且在 SVG 中将它们分组也破坏了行为，所以也许我稍后会解决这个问题）。

这是 js：

            asylumQ.hover(function() {
            asylumQ.attr({ opacity: 1, fill: 'red', stroke: 'red' });
            asylumQ.animate({ transform: 's2,2'}, 300, mina.easein);
            asylumTr.animate({ transform: 's2,2'}, 300, mina.easein);          
        },
            function() {
                asylumQ.attr({ opacity: 1, fill: 'white', stroke: 'white' });
                asylumQ.animate({ transform: 's0.8,0.8'}, 300);
                asylumTr.animate({ transform: 's0.8,0.8'}, 300, function () {
                    asylumQ.animate({ transform: 's1,1'}, 20);
                    asylumTr.animate({ transform: 's1,1'}, 20);
                });
            }
        );
        asylumTr.hover(function() {
            asylumQ.attr({ opacity: 1, fill: 'red', stroke: 'red' });
            asylumQ.animate({ transform: 's2,2'}, 300, mina.easein);
            asylumTr.animate({ transform: 's2,2'}, 300, mina.easein);
        },
            function() {
                asylumQ.attr({ opacity: 1, fill: 'white', stroke: 'white' });
                asylumQ.animate({ transform: 's0.8,0.8'}, 300);
                asylumTr.animate({ transform: 's0.8,0.8'}, 300, function () {
                    asylumQ.animate({ transform: 's1,1'}, 20);
                    asylumTr.animate({ transform: 's1,1'}, 20);
                });
            }
        );
        asylumTr.click(function() {
            asylumQ.attr({ opacity: 1, fill: 'red', stroke: 'red' });
            $('#asylumModal').modal('show');
        });