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

Question

我想更改单击以打开模式框的 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');
        });

Answer 1

用你想要的颜色定义一个 CSS 类，然后在对话框打开时将它添加到元素类列表中。并在您关闭对话框时再次将其删除。

例子：

$("#myrect").click(function() {

  // Add a class to the rect which keeps it with the hover styling.
  // Note: We can't use jQuery's addClass() for this because it doesn't work with SVGs
  $("#myrect").attr("class", "dialogIsOpen");
  
  // Open the modal
  $("#myModal").modal();

  // Attach a handler for the dialog's hide event so we can remove the class we added
  $('#myModal').on('hidden.bs.modal', function (e) {
    $("#myrect").removeAttr("class");
  });

});

rect {
  transform: scale(1,1);
  transition: all 0.5s;
  cursor: pointer;
}

rect:hover,
.dialogIsOpen {
  transform: scale(1.25,1.25);
  fill: red;
}

/* position the modal out of the way so we can see the SVG */
.modal-dialog {
  margin-top: 160px !important;
}

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<svg>
  <g transform="translate(150 75)">
    <rect id="myrect" x="-50" y="-50" width="100" height="100" fill="white" stroke="black"/>
  </g>
</svg>


<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>An example modal</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>