Question

我试图使用以下内容水平翻转SVG的动画：

.animated {
  animation-duration: 2s;
  animation-fill-mode: both;
}

@keyframes customAnimation {
  0% {
    top: 0;
    right: 3px;
    transform: scaleX(1);
    visibility: visible;
  }
  100% {
    top: 0;
    right: -172px;
    transform: scaleX(-1);
  }
}

.customAnimation {
  animation-name: customAnimation;
}

当我想要翻转时，我尝试旋转的元素会同时接收.customAnimation和animated作为类。

问题是在动画的中间点，元素基本上是一条直线。理想情况下，它应保持一定的厚度/重量，以使其看起来更加3D。我添加了一个代码片段来演示：（如果您在运行代码段时遇到问题，相应的代码包含在下面） [点击锁定的圈子开始]

＆＃13;

$(".lock-circle").on("click", function(e){
    var $this = $(".lock-top");
    if($this.hasClass("animated")){
        $this.removeClass("animated");
        $this.removeClass("customAnimation");
    }else{
        $this.addClass("animated customAnimation");
    }
});

＆＃13;

body {
  background: #333;
}

.container { 
  width: 300px; 
  min-height: 50%;
  margin: 0 auto;
  background: #FF9B02;
  
  padding: 15px;
  position: relative;
}


svg { 
  display: block;
  position: relative;
}

.lock-top, .lock-circle { 
  width: 80%; 
  margin: 0 auto;
  
  cursor: pointer;
}

.lock-top { top: 0; right: 3px }
.lock-circle { top: -90px; }

/*******************************
 *          Animation
 ****************************/

.animated {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes customAnimation {
  0% {
    top: 0;
    right: 3px;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    top: 0;
    right: -172px;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
}

@keyframes customAnimation {
  0% {
    top: 0;
    right: 3px;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    top: 0;
    right: -172px;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
}

.customAnimation {
  -webkit-animation-name: customAnimation;
          animation-name: customAnimation;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="container">
  <svg class="lock-top" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 111 114" style="enable-background:new 0 0 111 114;" xml:space="preserve">
    <style type="text/css">
      .st0 {
        fill: #FFFFFF;
      }
    </style>
    <path class="st0" d="M100,67.7c-0.3-23.8-19.6-43-43.5-43S13.3,43.9,13,67.7h0v13h8V68.2c0-19.6,15.9-35.5,35.5-35.5
      S92,48.6,92,68.2v22.5h8L100,67.7L100,67.7z" />
  </svg>

  <svg class="lock-circle" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 111 114" style="enable-background:new 0 0 111 114;" xml:space="preserve">
    <style type="text/css">
      .st0 {
        fill: #FFFFFF;
      }
    </style>
    <path class="st0" d="M98.5,25.7v-15h-8v6.2c-9.3-8.2-21.6-13.2-35-13.2c-29.3,0-53,23.7-53,53c0,29.3,23.7,53,53,53s53-23.7,53-53
      C108.5,45.1,104.8,34.4,98.5,25.7z M55.5,97.7c-22.6,0-41-18.4-41-41c0-22.6,18.4-41,41-41c22.6,0,41,18.4,41,41
      C96.5,79.3,78.1,97.7,55.5,97.7z M55.5,20.7c-19.9,0-36,16.1-36,36c0,19.9,16.1,36,36,36c19.9,0,36-16.1,36-36
      C91.5,36.8,75.4,20.7,55.5,20.7 M60,59.6c0,0,2.8,11.5,0.3,14c-1.7,1.7-7.9,1.7-9.6,0c-2.5-2.5,0.3-14,0.3-14
      c-1.9-1.4-3.1-3.5-3.1-6c0-4.2,3.4-7.6,7.6-7.6c4.2,0,7.6,3.4,7.6,7.6C63.1,56.1,61.8,58.3,60,59.6" />
  </svg>
</section>

＆＃13;

http://codepen.io/csengineer13/pen/JRdJjX

编辑：建议的解决方案使用z-index和一系列图层为旋转对象添加深度。它基本上创建了两个新的形状，提供深度和边缘，随着旋转发生可见。问题是解决方案是一个简单的形状;圆形，不适用于更复杂的SVG形状。

以下是适用于此问题的示例解决方案：

http://codepen.io/csengineer13/pen/qadQXR

没有解决/修复;而且我怀疑它是否可以修改工作。

水平旋转SVG的动画，但保持路径/笔划的宽度或厚度

0 个答案: