Question

我正在玩弄SVG以及它是如何工作的。我试图为这个SVG设置动画，信封关闭并飞向右边，然后出现一个复选标记。

到目前为止，我已完成信封SVG，我已设法让顶部向下翻转，但它高于信封，我需要它关闭信封。它也在向错误的方向翻转..

我该如何解决这个问题？

＆＃13;

mount_devise_token_auth_for 'User', at: 'auth', controllers: { passwords: 'passwords' }

＆＃13;

Answer 1

如果您在旋转过程中不想要移动某物，请将其放在原点。

在这种情况下的快速修复是更改flap元素的坐标，使得长边的y坐标为零，然后将元素包含在带有transform属性的<g>元素中以放置它应该去哪里。

也摆脱transform-origin风格。

这样可行，但可以清理很多：

＆＃13;

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;}
	.st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;}
	.st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;}
	.st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
	.st3{
		animation: flipX 1.6s forwards;
	}

	@-webkit-keyframes flipX {
  0% {
    opacity:0;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
  }
  100% {
    opacity:1;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
  }
}
@keyframes flipX {
  0% {
    opacity:0;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
  }
  100% {
    opacity:1;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
  }
}
.flipX{
  opacity:0;
  -webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
	animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
}
</style>
<g>
	<rect class="st0" width="805" height="314"/>
</g>
<g>
	<rect x="55" y="129" class="st1" width="192" height="98"/>
	<g>
		<polyline class="st2" points="55,129 151,178 247,129 "/>
		<g transform="translate(0 129)">
			<polyline class="st3" points="55,0 151,-65 247,0 "/>
		</g>
	</g>
</g>
</svg>

＆＃13;

Answer 2

如果您将translateY(-65px)添加到100%关键帧，它会在信封翻转时将其移动。 65px是一个眼球人物。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;}
	.st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;}
	.st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;}
	.st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
	.st3{
		transform-origin:55% 50%;
		-moz-transform-origin:55% 50%;
		animation: flipX 1.6s forwards;
	}

	@-webkit-keyframes flipX {
  0% {
    opacity:0;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
  }
  100% {
    opacity:1;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1)  translateY(-65px);
  }
}
@keyframes flipX {
  0% {
    opacity:0;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
  }
  100% {
    opacity:1;
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1)  translateY(-65px);
  }
}
.flipX{
  opacity:0;
  -webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
	animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
}
</style>
<g id="Layer_1">
	<rect id="XMLID_42_" class="st0" width="805" height="314"/>
</g>
<g id="Layer_2">
	<rect id="XMLID_1_" x="55" y="129" class="st1" width="192" height="98"/>

	<g id="Layer_3">
		<polyline id="XMLID_43_" class="st2" points="55,129 151,178 247,129 		"/>
		<polyline id="XMLID_3_" class="st3" points="55,129 151,64 247,129 		"/>
	</g>

</svg>

SVG折叠信封

2 个答案: