Question

我正在尝试用svg做一个汉堡菜单，但我的问题是我的svg只是一个填充，没有中风。

如何在悬停时更改每行的大小？

这是svg：

<svg id="menu" x="0px" y="0px" width="64.948px" height="30.172px" viewBox="0 0 64.948 30.172" style="enable-background:new 0 0 64.948 30.172;" xml:space="preserve">

  <style type="text/css">
    .st1{
      fill:#CE0011;
	  transition:all .8s ease;
    }
  </style>

  <path class="st1" id="line1" d="M64.948,2.73c-1.098,3.107-2.33,4.997-6.812,4.952c-16.91-0.17-33.824-0.068-50.942-0.068 c0.401-3.24,1.888-4.961,6.324-4.931C30.436,2.8,47.357,2.73,64.948,2.73z"/>
  <path class="st1" id="line2" d="M60.676,12.856c-0.947,2.002-1.688,3.567-2.365,4.999c-18.135,0-36.122,0-54.159,0 c0.843-4.768,1.126-4.995,6.183-4.997c15.25-0.006,30.499-0.002,45.749-0.002C57.404,12.856,58.723,12.856,60.676,12.856z"/>
  <path class="st1" id="line3" d="M56.599,23.023c-0.459,4.176-2.703,5.04-6.567,4.994C33.458,27.817,16.88,27.932,0,27.932 c0.348-2.549,0.455-4.888,3.908-4.894C21.379,23.006,38.849,23.023,56.599,23.023z"/>

</svg>

Answer 1

aspsmn说，试试......

svg:hover .st1 {
    transform: scale(0.8);
}

我构建了一个小提琴（http://jsfiddle.net/rfornal/pv0np9pw/）来测试它，并且实际上尝试使用高达1.2的缩放...这成为一个问题，因为我没有改变视图框的大小。

然而，这确实证明了工作理念。

没有中风的svg css动画

1 个答案: