带有css过渡的SVG g元素高度

Question

我遇到了一个问题。我的目标是在 svg 中创建一个眨眼的眼睛。我创建了转换为 svg 的图形。现在我打算在上面放一个 CSS 动画，让它看起来像在闪烁。我花了很多时间，但无法解决问题。

我实现这种效果的方法是用 css 过渡改变它的 g 元素高度，所以它看起来像在闪烁，但是当我把 css 放在它上面时它就消失了：（下面是我使用的 css 代码：

#svg_7 path{
    transform:scale(0, -1);
    -webkit-transform:scale(0, -1);
}

svg 代码

<g id="svg_7">
 <path id="svg_8" d="m35.99502,49.21692c-11.88306,0 -22.25696,5.59302 -27.80701,13.90399c5.55103,8.31104 15.92505,13.90302 27.80701,13.90302c11.88306,0 22.25696,-5.59198 27.80896,-13.90302c-5.55299,-8.31097 -15.92701,-13.90399 -27.80896,-13.90399z" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent" />
 <circle id="svg_9" r="9.83801" cy="63.12191" cx="35.995" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent" />

主要目的是创建一个眨眼的眼睛，每隔几秒钟就会眨眼。请给我一个解决方案。如果需要，我们甚至可以使用 js/jquery。

jsfiddle link

提前致谢 卡克斯

Answer 1

事实上，要获得最接近（最接近现实）眨眼的效果，我认为你必须重新设计眼睛。比如我们只需要对上眼睑进行动画处理（而不是两者）。内瞳孔也应被眼睑覆盖。这样做并不容易，至少我觉得用 CSS 比用 SVG 更容易做到。然而闭上眼睑的时间很短，我们可以同时激活眼睑和内瞳。将两者的垂直尺寸缩小到接近 0 应该可以完成这项工作。但是我们可以注意到stroke-width 在如此小的比例下变得更薄（可能会创建一些可见的虚线而不是实线）。所以我们还必须动画（增加）stroke-width。这是 CSS 代码（请在基于 webkit 的浏览器中运行，它应该适用于所有浏览器）：

#svg_7 path{   
   -webkit-transform-origin:50%;    
   -webkit-animation:blink 3s infinite alternate;
}
#svg_9 {
 -webkit-transform-origin:50%;    
 -webkit-animation:coreblink 3s infinite alternate;
}
@-webkit-keyframes blink {
  0%, 96% {
    -webkit-transform:scale(1,1);
    stroke-width:1.4434px;
  }
  100% {
    -webkit-transform:scale(1,0.05);
    stroke-width:6px;
  }
}
@-webkit-keyframes coreblink {
  0%, 96% {
    -webkit-transform:scale(1,1);        
  }
  100% {
    -webkit-transform:scale(1,0.05);        
  }
}

注意，如果你增加animation-duration（在demo中是3s），你也应该增加关键百分比（在demo中是96%），这样闭眼的时间就不会相当大。我知道这并不完美（就像我之前所说的那样），但至少在某些用例中是可以接受的，希望您对此感到满意。

Demo.

更新：如果要将 SVG 代码保存到文件中，还应使用 <style> 标签将 CSS 代码（用于为 SVG 制作动画）与 SVG 文件一起发送这个：

<svg width="99" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<style>
  #svg_7 path{   
   -webkit-transform-origin:50%;    
   -webkit-animation:blink 3s infinite alternate;
  }
  #svg_9 {
   -webkit-transform-origin:50%;    
   -webkit-animation:coreblink 3s infinite alternate;
  }
  @-webkit-keyframes blink {
    0%, 96% {
      -webkit-transform:scale(1,1);
      stroke-width:1.4434px;
    }
    100% {
      -webkit-transform:scale(1,0.05);
      stroke-width:6px;
    }
  }
  @-webkit-keyframes coreblink {
    0%, 96% {
      -webkit-transform:scale(1,1);        
    }
    100% {
      -webkit-transform:scale(1,0.05);        
    }
  }
</style>

<g id="svg_1">
<rect id="svg_2" height="71.991" width="71.99" stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="transparent" y="0.71191" x="26.195"/>
<line id="svg_3" y2="0.71191" x2="26.195" y1="27.12591" x1="0" stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="transparent"/>
<line id="svg_4" y2="72.70391" x2="26.195" y1="99.11691" x1="0" stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="transparent"/>
<rect id="svg_5" height="71.991" width="71.992" stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="#000000" y="27.12491" x="0"/>
<g id="svg_6">
<g id="svg_7">
<path id="svg_8" d="m35.99502,49.21692c-11.88306,0 -22.25696,5.59302 -27.80701,13.90399c5.55103,8.31104 15.92505,13.90302 27.80701,13.90302c11.88306,0 22.25696,-5.59198 27.80896,-13.90302c-5.55299,-8.31097 -15.92701,-13.90399 -27.80896,-13.90399z" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent">        
 </path>
 <circle id="svg_9" r="9.83801" cy="63.12191" cx="35.995" stroke-miterlimit="10" stroke-width="1.4434" stroke="#fa5400" fill="transparent" />
</g>
</g>
<polygon id="svg_10" points="98.1849594116211,72.70391845703125 71.9919662475586,99.116943359375 71.9919662475586,27.12591552734375 98.1849594116211,0.7119140923023224 " stroke-miterlimit="10" stroke-width="1.4434" stroke="#ffffff" fill="transparent"/>
</g>
</svg>

另一种方法是尝试使用纯 SVG 动画。但是我发现很难将 SVG 动画等同于 CSS 动画。