在不裁剪的情况下仅对 SVG 中的一条路径进行动画处理

Question

我正在为我的徽标使用 SVG，我想给其中一个字母一个下推效果：

body {
  background: skyblue;
}

@-webkit-keyframes push {
  0%,
  25%,
  75%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

#Path_9-2 {
  -webkit-animation: push 2s;
  animation: push 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="258.313" height="58.791" viewBox="0 0 258.313 58.791">
  <defs>
    <filter id="Path_9" x="35.958" y="17.221" width="70.528" height="41.57" filterUnits="userSpaceOnUse">
      <feOffset dx="2" dy="4" input="SourceAlpha"/>
      <feGaussianBlur stdDeviation="1" result="blur"/>
      <feFlood flood-opacity="0.161"/>
      <feComposite operator="in" in2="blur"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <g id="Group_69" data-name="Group 69" transform="translate(-38 -19)">
    <path id="Path_7" data-name="Path 7" d="M18,17.15a13.73,13.73,0,0,0-9.31,3.42,4.3,4.3,0,0,0-4.22-3.42A4.43,4.43,0,0,0,0,21.71V47.24a4.49,4.49,0,0,0,4.56,4.62,4.44,4.44,0,0,0,4.49-4.62V31.69a6.12,6.12,0,0,1,6.29-6.43c3.69,0,6.17,2.61,6.17,6.43V47.24A4.48,4.48,0,0,0,26,51.86a4.4,4.4,0,0,0,4.49-4.62V30.49c0-8.11-4.9-13.34-12.47-13.34" transform="translate(38.002 19.001)" fill="#fff"/>
    <g transform="matrix(1, 0, 0, 1, 38, 19)" filter="url(#Path_9)">
      <path id="Path_9-2" data-name="Path 9" d="M84.61,51.79H53.83a17.29,17.29,0,0,1,0-34.57H84.61a17.29,17.29,0,0,1,0,34.57ZM53.83,25.85a8.66,8.66,0,1,0,0,17.32H84.61a8.66,8.66,0,1,0,0-17.32Z" transform="translate(0 0)" fill="#fff"/>
    </g>
    <path id="Path_10" data-name="Path 10" d="M257.24,44.89,247.72,33l8.44-8.58a4.47,4.47,0,0,0,1.48-3.22,4,4,0,0,0-4.16-4,4.27,4.27,0,0,0-3.14,1.41l-10.59,11A4.9,4.9,0,0,0,238.14,33a5.39,5.39,0,0,0,1.41,3.28l11.32,13.94a4,4,0,0,0,3.35,1.67,4.08,4.08,0,0,0,4.09-4.15,4.41,4.41,0,0,0-1.07-2.82M232.18,0a4.49,4.49,0,0,0-4.56,4.62V47.24a4.49,4.49,0,0,0,4.56,4.62,4.44,4.44,0,0,0,4.49-4.62V4.62A4.4,4.4,0,0,0,232.18,0M202.77,25.39c4.89,0,8.57,3.89,8.57,9.12s-3.68,9-8.57,9-8.58-3.75-8.58-9,3.62-9.12,8.58-9.12m0-8.24c-10,0-17.76,7.57-17.76,17.29A17.35,17.35,0,0,0,202.7,51.79c10,0,17.89-7.7,17.89-17.35s-7.91-17.29-17.82-17.29m-37.06,0a13.72,13.72,0,0,0-9.31,3.42,4.3,4.3,0,0,0-4.22-3.42,4.43,4.43,0,0,0-4.49,4.56V47.24a4.49,4.49,0,0,0,4.56,4.62,4.43,4.43,0,0,0,4.48-4.62V31.69a6.13,6.13,0,0,1,6.3-6.43c3.69,0,6.17,2.61,6.17,6.43V47.24a4.48,4.48,0,0,0,4.49,4.62,4.4,4.4,0,0,0,4.49-4.62V30.49c0-8.11-4.9-13.34-12.47-13.34M139.78,44.89,130.27,33l8.44-8.58a4.47,4.47,0,0,0,1.48-3.22,4,4,0,0,0-4.16-4,4.28,4.28,0,0,0-3.15,1.41l-10.58,11A4.9,4.9,0,0,0,120.69,33a5.43,5.43,0,0,0,1.4,3.28l11.33,13.94a4,4,0,0,0,3.35,1.67,4.08,4.08,0,0,0,4.09-4.15,4.37,4.37,0,0,0-1.08-2.82M114.73,0a4.49,4.49,0,0,0-4.56,4.62V47.24a4.49,4.49,0,0,0,4.56,4.62,4.43,4.43,0,0,0,4.48-4.62V4.62A4.39,4.39,0,0,0,114.73,0" transform="translate(38.002 19.001)" fill="#fff"/>
  </g>
</svg>

如您所见，'o' 被向下推时被裁剪了。尝试使用 overflow: visible 并增加高度但没有帮助。

Answer 1

我删除了过滤器的大小和位置。另外，我正在按照您的预期使用 svg{overflow:visible} 。被切断的是形体的影子。请看一下。

body{background:skyBlue;}

 @-webkit-keyframes push {
 0%,
 25%,
 75%,
 100% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
 }
 50% {
  -webkit-transform: translateY(8px);
          transform: translateY(8px);
 }
}
#Path_9-2{

    -webkit-animation: push 2s;
    animation: push 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


svg{overflow:visible}

<svg width="258.313" height="58.791" viewBox="0 0 258.313 58.791">
  <defs>
    <filter id="Path_9"  filterUnits="userSpaceOnUse">
      <feOffset dx="2" dy="4" input="SourceAlpha"/>
      <feGaussianBlur stdDeviation="1" result="blur"/>
      <feFlood flood-opacity="0.161"/>
      <feComposite operator="in" in2="blur"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <g id="Group_69" data-name="Group 69" transform="translate(-38 -19)">
    <g transform="matrix(1, 0, 0, 1, 38, 19)" filter="url(#Path_9)">
      <path id="Path_9-2" data-name="Path 9" d="M84.61,51.79H53.83a17.29,17.29,0,0,1,0-34.57H84.61a17.29,17.29,0,0,1,0,34.57ZM53.83,25.85a8.66,8.66,0,1,0,0,17.32H84.61a8.66,8.66,0,1,0,0-17.32Z" transform="translate(0 0)" fill="#fff"/>
    </g>    
  </g>
</svg>

在不裁剪的情况下仅对 SVG 中的一条路径进行动画处理

Animate only one path within an SVG without cropping

css

svg

css-transforms

css-animations

svg-transforms