Question

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

当光标在元素上时，元素为红色并且缩放得更大，但当我点击它以打开模态时，它会变回白色。当模态打开时如何保持红色，当模态关闭时仅变回白色？当我不点击任何东西时，我仍然想要悬停行为。

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>

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

1 个答案: