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

提前谢谢 KAX

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（它是3s），您还应该增加密钥百分比（在演示中为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动画。

具有css转换的SVG g元素高度

1 个答案:

Demo