没有中风的svg css动画答案

【问题标题】：svg css animation without stroke没有中风的svg css动画
【发布时间】：2015-04-07 07:36:50
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

你可以这样做svg:hover .st1{ transform: scale(0.8)}
好的，但是否可以在每一行添加 ::before 和 ::after 函数？例如 svg:hover #line1::before ???
SVG 不支持 :after 和 :before 伪元素。
Check this answer

标签： css animation svg

【解决方案1】：

正如 aspsmn 所说，试试...

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

我构建了一个小提琴 (http://jsfiddle.net/rfornal/pv0np9pw/) 来测试它，并实际尝试使用高达 1.2 的比例...这成为一个问题，因为我没有更改视图框的大小。

但是，这确实证明了工作理念。

【讨论】：