当定位一个 SVG 层时，使用 css 动画折叠 SVG 信封的行为很奇怪
[英]Folding SVG envelope with css animation behaves strange when targeting one SVG layer
问题描述
I want to animate my SVG envelope so that the flap folds downwards.
我想为我的 SVG 信封设置动画，以便翻盖向下折叠。 How can i achieve this?我怎样才能做到这一点？
I have tried to animate the whole envelope and i think this is the way the flap should behave.我试图为整个信封设置动画，我认为这就是封盖应该表现的方式。 See the result:查看结果：
#svg-envelope { height: 200px; animation: fold 4s forwards infinite; } @keyframes fold { 0% { transform: rotateX(0deg); transform-origin: bottom; } 100% { transform: rotateX(180deg); transform-origin: bottom; } }
<svg id="svg-envelope" height="100%" viewBox="0 0 1715 1689" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"> <g transform="matrix(1,0,0,1,-382.933,-901.191)"> <g id="base" transform="matrix(0.885663,0,0,1,121.31,324.647)"> <rect x="302.051" y="1266.63" width="1922.47" height="994.035" style="fill:url(#_Linear1);stroke:black;stroke-width:8.82px;"/> </g> <g id="innerside-after" transform="matrix(0.885663,5.76867e-17,1.24618e-16,-1.0038,121.31,2868.06)"> <path d="M1238.5,755.873C1253.69,747.587 1272.88,747.587 1288.08,755.873C1438.68,838.015 2224.52,1266.63 2224.52,1266.63L302.051,1266.63C302.051,1266.63 1087.89,838.015 1238.5,755.873Z" style="fill:url(#_Linear3);stroke:black;stroke-width:8.8px;stroke-linejoin:miter;stroke-miterlimit:1;"/> </g> <g id="bottomflap" transform="matrix(0.885663,5.42038e-16,-4.3385e-16,1.10652,121.31,1183.76)"> <path d="M1236.74,756.832C1252.76,748.097 1273.82,748.097 1289.83,756.832C1444.69,841.292 2224.52,1266.63 2224.52,1266.63L302.051,1266.63C302.051,1266.63 1081.89,841.292 1236.74,756.832Z" style="fill:url(#_Linear4);stroke:black;stroke-width:8.32px;"/> </g> <g id="topflap-open-colored" transform="matrix(0.885663,4.72789e-16,-6.19857e-16,1.30832,121.31,-65.8757)"> <path d="M1233.71,758.485C1250.98,749.068 1275.6,749.068 1292.86,758.485C1454.58,846.686 2224.52,1266.63 2224.52,1266.63L302.051,1266.63C302.051,1266.63 1072,846.686 1233.71,758.485Z" style="fill:url(#_Linear7);stroke:black;stroke-width:7.46px;"/> </g> </g> <defs> <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,994.035,302.051,1763.65)"><stop offset="0" style="stop-color:rgb(59,183,90);stop-opacity:1"/><stop offset="0.51" style="stop-color:rgb(31,93,81);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(21,62,78);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,524.276,302.051,1004.49)"><stop offset="0" style="stop-color:rgb(226,226,226);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(25,65,80);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,263.844,302.051,870.864)"><stop offset="0" style="stop-color:rgb(226,226,226);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(25,65,80);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,524.276,302.051,1004.49)"><stop offset="0" style="stop-color:rgb(59,183,90);stop-opacity:1"/><stop offset="0.51" style="stop-color:rgb(31,93,81);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(21,62,78);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,263.844,302.051,870.864)"><stop offset="0" style="stop-color:rgb(226,226,226);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(25,65,80);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,524.276,302.051,1004.49)"><stop offset="0" style="stop-color:rgb(59,183,90);stop-opacity:1"/><stop offset="0.51" style="stop-color:rgb(31,93,81);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(21,62,78);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear7" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,524.276,302.051,1004.49)"><stop offset="0" style="stop-color:rgb(59,183,90);stop-opacity:1"/><stop offset="0.51" style="stop-color:rgb(31,93,81);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(21,62,78);stop-opacity:1"/></linearGradient> </defs> </svg>
But when i try to apply the same animation to only the flap-layer (see below), it's seems like it's a little zoomed (or stretched?) and it doesn't start from its original starting point.但是当我尝试仅将相同的动画应用于襟翼层（见下文）时，它似乎有点放大（或拉伸？），并且它不是从其原始起点开始。 Why is that?这是为什么？ And how can i solve this?我该如何解决这个问题？
#svg-envelope{ height: 200px; } #topflap-open-colored{ animation: fold 4s forwards infinite; } @keyframes fold { 0%{ transform: rotateX(0deg); transform-origin: bottom; } 100%{ transform: rotateX(180deg); transform-origin: bottom; } }
<svg id="svg-envelope" height="100%" viewBox="0 0 1715 1689" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"> <g transform="matrix(1,0,0,1,-382.933,-901.191)"> <g id="base" transform="matrix(0.885663,0,0,1,121.31,324.647)"> <rect x="302.051" y="1266.63" width="1922.47" height="994.035" style="fill:url(#_Linear1);stroke:black;stroke-width:8.82px;"/> </g> <g id="innerside-after" transform="matrix(0.885663,5.76867e-17,1.24618e-16,-1.0038,121.31,2868.06)"> <path d="M1238.5,755.873C1253.69,747.587 1272.88,747.587 1288.08,755.873C1438.68,838.015 2224.52,1266.63 2224.52,1266.63L302.051,1266.63C302.051,1266.63 1087.89,838.015 1238.5,755.873Z" style="fill:url(#_Linear3);stroke:black;stroke-width:8.8px;stroke-linejoin:miter;stroke-miterlimit:1;"/> </g> <g id="bottomflap" transform="matrix(0.885663,5.42038e-16,-4.3385e-16,1.10652,121.31,1183.76)"> <path d="M1236.74,756.832C1252.76,748.097 1273.82,748.097 1289.83,756.832C1444.69,841.292 2224.52,1266.63 2224.52,1266.63L302.051,1266.63C302.051,1266.63 1081.89,841.292 1236.74,756.832Z" style="fill:url(#_Linear4);stroke:black;stroke-width:8.32px;"/> </g> <g id="topflap-open-colored" transform="matrix(0.885663,4.72789e-16,-6.19857e-16,1.30832,121.31,-65.8757)"> <path d="M1233.71,758.485C1250.98,749.068 1275.6,749.068 1292.86,758.485C1454.58,846.686 2224.52,1266.63 2224.52,1266.63L302.051,1266.63C302.051,1266.63 1072,846.686 1233.71,758.485Z" style="fill:url(#_Linear7);stroke:black;stroke-width:7.46px;"/> </g> </g> <defs> <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,994.035,302.051,1763.65)"><stop offset="0" style="stop-color:rgb(59,183,90);stop-opacity:1"/><stop offset="0.51" style="stop-color:rgb(31,93,81);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(21,62,78);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,524.276,302.051,1004.49)"><stop offset="0" style="stop-color:rgb(226,226,226);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(25,65,80);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,263.844,302.051,870.864)"><stop offset="0" style="stop-color:rgb(226,226,226);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(25,65,80);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,524.276,302.051,1004.49)"><stop offset="0" style="stop-color:rgb(59,183,90);stop-opacity:1"/><stop offset="0.51" style="stop-color:rgb(31,93,81);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(21,62,78);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,263.844,302.051,870.864)"><stop offset="0" style="stop-color:rgb(226,226,226);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(25,65,80);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,524.276,302.051,1004.49)"><stop offset="0" style="stop-color:rgb(59,183,90);stop-opacity:1"/><stop offset="0.51" style="stop-color:rgb(31,93,81);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(21,62,78);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear7" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,524.276,302.051,1004.49)"><stop offset="0" style="stop-color:rgb(59,183,90);stop-opacity:1"/><stop offset="0.51" style="stop-color:rgb(31,93,81);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(21,62,78);stop-opacity:1"/></linearGradient> </defs> </svg>
1 个解决方案
解决方案1
3 已采纳 2020-01-04 00:08:23
The issue you're running into was that you had a transform attribute on the #topflap-open-colored element that was conflicting.您遇到的问题是#topflap-open-colored元素上的transform属性存在冲突。 By moving that property to the path inside it, that issue was resolved.通过将该属性移动到其中的路径，该问题得到解决。
Unfortunately, setting the transform-origin to bottom on the group didn't quite finish the job.不幸的是，将transform-origin设置为组的bottom并没有完全完成工作。 It seems that the various transformations were causing the origin point to be somewhat below the perceived bottom of the envelope flap.似乎各种变换导致原点稍微低于信封口盖的感知底部。 I was able to adjust the origin slightly to improve the result—I landed at 94% after some trial and error:我能够稍微调整原点以改善结果 - 经过一些试验和错误后，我达到了 94%：
#svg-envelope{ height: 200px; } #topflap-open-colored { transform-origin: center 94%; animation: fold 4s forwards infinite; } @keyframes fold { 0%{ transform: rotateX(0deg); } 100%{ transform: rotateX(180deg); } }
<svg id="svg-envelope" height="100%" viewBox="0 0 1715 1689" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"> <g transform="matrix(1,0,0,1,-382.933,-901.191)"> <g id="base" transform="matrix(0.885663,0,0,1,121.31,324.647)"> <rect x="302.051" y="1266.63" width="1922.47" height="994.035" style="fill:url(#_Linear1);stroke:black;stroke-width:8.82px;"/> </g> <g id="innerside-after" transform="matrix(0.885663,5.76867e-17,1.24618e-16,-1.0038,121.31,2868.06)"> <path d="M1238.5,755.873C1253.69,747.587 1272.88,747.587 1288.08,755.873C1438.68,838.015 2224.52,1266.63 2224.52,1266.63L302.051,1266.63C302.051,1266.63 1087.89,838.015 1238.5,755.873Z" style="fill:url(#_Linear3);stroke:black;stroke-width:8.8px;stroke-linejoin:miter;stroke-miterlimit:1;"/> </g> <g id="bottomflap" transform="matrix(0.885663,5.42038e-16,-4.3385e-16,1.10652,121.31,1183.76)"> <path d="M1236.74,756.832C1252.76,748.097 1273.82,748.097 1289.83,756.832C1444.69,841.292 2224.52,1266.63 2224.52,1266.63L302.051,1266.63C302.051,1266.63 1081.89,841.292 1236.74,756.832Z" style="fill:url(#_Linear4);stroke:black;stroke-width:8.32px;"/> </g> <g id="topflap-open-colored"> <path d="M1233.71,758.485C1250.98,749.068 1275.6,749.068 1292.86,758.485C1454.58,846.686 2224.52,1266.63 2224.52,1266.63L302.051,1266.63C302.051,1266.63 1072,846.686 1233.71,758.485Z" style="fill:url(#_Linear7);stroke:black;stroke-width:7.46px;" transform="matrix(0.885663,4.72789e-16,-6.19857e-16,1.30832,121.31,-65.8757)"/> </g> </g> <defs> <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,994.035,302.051,1763.65)"><stop offset="0" style="stop-color:rgb(59,183,90);stop-opacity:1"/><stop offset="0.51" style="stop-color:rgb(31,93,81);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(21,62,78);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,524.276,302.051,1004.49)"><stop offset="0" style="stop-color:rgb(226,226,226);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(25,65,80);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,263.844,302.051,870.864)"><stop offset="0" style="stop-color:rgb(226,226,226);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(25,65,80);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,524.276,302.051,1004.49)"><stop offset="0" style="stop-color:rgb(59,183,90);stop-opacity:1"/><stop offset="0.51" style="stop-color:rgb(31,93,81);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(21,62,78);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,263.844,302.051,870.864)"><stop offset="0" style="stop-color:rgb(226,226,226);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(25,65,80);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,524.276,302.051,1004.49)"><stop offset="0" style="stop-color:rgb(59,183,90);stop-opacity:1"/><stop offset="0.51" style="stop-color:rgb(31,93,81);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(21,62,78);stop-opacity:1"/></linearGradient> <linearGradient id="_Linear7" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1922.47,0,0,524.276,302.051,1004.49)"><stop offset="0" style="stop-color:rgb(59,183,90);stop-opacity:1"/><stop offset="0.51" style="stop-color:rgb(31,93,81);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(21,62,78);stop-opacity:1"/></linearGradient> </defs> </svg>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
SVG折叠信封 - SVG Folding Envelope
Css animation 在动画两个 SVG 属性时有奇怪的延迟 - Css animation has strange delay when animating two SVG properties
CSS背景SVG动画在Opera中的奇怪行为 - CSS background SVG animation strange behavior in Opera
SVG <use> 在Firefox和IE中表现异常 - SVG <use> behaves strange in Firefox and IE
简化这个 css svg 动画 - simplify this css svg animation
使用Css旋转SVG（动画） - Rotating a SVG with Css (Animation)
SVG animation 在 CSS - SVG animation in CSS
CSS SVG动画不起作用 - CSS SVG animation not working
CSS SVG Animation 用于 Slider - CSS SVG Animation for a Slider
将一个 Svg 层居中到另一个 Svg - Center one Svg layer into another Svg
相关标签