SVG上的CSS动画不起作用

Question

我是使用 svg 代码的新手。我正在尝试用 css 制作动画，而且我也在使用波旁威士忌。什么都没有发生，我不知道为什么。谁能看到我的代码有什么问题？

它在 Firefox 或 webkit (chrome) 中不起作用

谢谢：

 <body>
  <svg  viewBox="0 0 200 200"> 
  <g id="chemistry">
    <g id="bubbles">
        <circle id="bubble1" class="liquid" cx="54.2" cy="141.4" r="8"/>
        <circle id="bubble2" class="liquid" cx="65.2" cy="139.4" r="8"/>
            <circle id="bubble3" class="liquid" cx="77.2" cy="138.4" r="8"/>
            <circle id="bubble4" class="liquid" cx="86.2" cy="140.4" r="8"/>
        <circle id="bubble5" class="liquid" cx="97.2" cy="135.4" r="8"/>
        <circle id="bubble6" class="liquid" cx="108.2" cy="138.4" r="8"/>
        <circle id="bubble7" class="liquid" cx="117.2" cy="134.4" r="8"/>
        <circle id="bubble8" class="liquid" cx="127.2" cy="137.4" r="8"/>
        <circle id="bubble9" class="liquid" cx="136.2" cy="134.4" r="8"/>
        <circle id="bubble10" class="liquid" cx="146.2" cy="136.4" r="8"/>
     </g>
      <g id="liquid">
          <polygon class="liquid" points="176.3,181.6 22.1,180 46,139.9 147,135.7"/>
      </g>
      <g id="bottle">
          <path class="bottle" d="M188.5,171.2c4.8,7.6,5.7,14.1,2.7,19.5c-2.9,5.4-8.9,8.1-     17.9,8.1h-147c-9,0-15-2.7-17.9-8.1
            c-2.9-5.4-2-11.9,2.7-19.5L75.3,70V19.1h-8.2c-2.2,0-4.1-0.8-5.7-2.4c-1.6-1.6-2.4-3.5-2.4-5.7c0-2.2,0.8-4.1,2.4-5.7
            c1.6-1.6,3.5-2.4,5.7-2.4h65.3c2.2,0,4.1,0.8,5.7,2.4c1.6,1.6,2.4,3.5,2.4,5.7c0,2.2-0.8,4.1-2.4,5.7c-1.6,1.6-3.5,2.4-5.7,2.4
            h-8.2V70L188.5,171.2z M89,78.7L26,178.2l71.9-0.6l74.8,0.9l-62.2-99.8l-2.6-4V70V19.1H91.6V70v4.7L89,78.7z"/>
      </g>
       </g>
    </svg>
 </body>

带有波旁威士忌的 CSS：

body {
  background: #3b3b3d;
}

svg {
  display: block;
  margin: 10% auto;
  width: 300px;
  height: 300px;
}

@include keyframes (scale) {

  0% {
   @include transform(scale(1));
  }

  25% {
    @include transform(scale(1.75));
  }

  50% {
     @include transform(scale(0.5));
  }

  75% {
    @include transform(scale(1.25));
  }

  100% {
    @include transform(scale(1));
  }
}

#chemistry {
  @include animation(scale 3.0s ease-in infinite);  
}

.bottle {
  fill: #2BAAD6;
}

.liquid {
  fill: #D960EA;
}

谢谢

Answer 1

使用以下波旁威士忌并通过 sassmeister 运行它：

@import "bourbon/bourbon";
body {
  background: #3b3b3d;
}

svg {
  display: block;
  margin: 10% auto;
  width: 300px;
  height: 300px;
}

@include keyframes (scale) {

  0% {
   @include transform-origin(center center);
   @include transform(translateY(50px));
   @include transform(scale(1));
  }

  25% {
    @include transform(scale(1.75));
  }

  50% {
     @include transform(scale(0.5));
  }

  75% {
    @include transform(scale(1.25));
  }

  100% {
    @include transform(scale(1));
  }
}

#bubbles .liquid {
  @include animation(scale 3.0s ease-in infinite);  
}

.bottle {
  fill: #2BAAD6;
}

.liquid {
  fill: #D960EA;
}

产量：http://jsfiddle.net/km4u9/2/ 气泡在烧瓶中活跃的地方。调整动画值以将效果调整为您想要的结果。我确实在 svg 的 <path> 元素中包含了一些空格。