为什么当我 toggle/add 另一个具有其他背景的 class 时我的背景 svg 没有改变？

Question

我有一个 div 带有 svg 背景 + 动画。我添加了一个按钮并说当我点击它时 class 应该被切换/添加和删除，这样 "background-image" 就会改变。但它不起作用。可能是我的问题jquery，其实我根本不知道

这是我的代码：

我的 css 代码和完整的 svg 代码（--> 你不能 post 超过 30.000 个字符 lol）：http://pastebin.com/Qwys2tpZ

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  overflow-y: hidden;
}

.Space-Container {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-image: url(data:image/svg+xml,..... - svg code here - .......);
}

.Space-Container-2 {
  background-image: url(data:image/svg+xml,..... - svg code here - .......)   !important;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Space</title>

    <link rel="stylesheet" type="text/css" href="Space.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        $(".start").click(function () {
          $("#Img").removeClass("Space-Container");
          $("#Img").addClass("Space-Container-2");
        });
      });
    </script>

  </head>
  <body>

    <button class="start">start</button>
    
    <div id="Img" class="Space-Container">
    </div>
    
  </body>
</html>

Answer 1

问题似乎与您的 jQuery 无关。 Space-container-2 中的 SVG 代码本身可能发生了某些事情。但是，在不了解您所看到的具体问题的更多信息的情况下，我建议为您的 Img div 指定特定的宽度和高度，并将与 .Space-container-2 相同的属性应用于 .Space-container-2 。 Space-container:

.Space-Container-2 {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-image: url(data:image/svg+xml,..... - svg code here - .......);
}

否则，当您删除 .Space-container class 时，您将删除该元素的所有样式，包括其宽度和高度。

Answer 2

您的 class .Space-Container-2 应该具有您在 .Space-Container 中指定的其余属性。您正在 Space-Container 中设置宽度和高度（至少在此示例中）。然后你要删除 class。因此，当您添加新的 class 时，您需要将其设置回

为什么当我 toggle/add 另一个具有其他背景的 class 时我的背景 svg 没有改变？

Why is my background svg not changing when I toggle/add another class with a other background?

html

css

jquery

svg

background-image