Question

So I have this logo written with SVG.

I'm trying to rotate grouped ellipses around their longer axis, to create the illusion of 3D rotation.

    .svg-spinner3 {
    -webkit-animation: rotation 2s infinite linear;
    -moz-animation: rotation 2s infinite linear;
    -o-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
}

Rotating them around center seems to be easy, but I can't seem to figure out how to rotate them (or at least skew/shrink them toward the axis untill they become a line, and then back).

Is it too hard to do? Bear in mind I'm a complete SVG newbie.

Thanks!

Answer 1

您无法对SVG内的元素进行3D变换。因此，您无法绕垂直（Y）轴旋转。

您需要通过仅在一个方向上缩放椭圆dosn来模拟旋转。然后再回来。

我也建议不要使用transform-origin: 50% 50%。浏览器之间的百分比值的工作方式不同。 Chrome会按照您的方式运行，但这种方式实际上与规范相反。使用绝对坐标作为旋转中心。对于你的形状，相当于（50％，50％）似乎是大约（230.7,198.4）。

因此，我们需要做的是缩放椭圆的旋转轴，即： 1.将椭圆旋转到垂直方向 2.根据需要放大或缩小 3.将椭圆旋转回原始旋转

对于我在下面选择的示例椭圆，我们需要使用的角度为28度。所以我们的转变是：

transform: rotate(28deg) scale(0.01, 1) rotate(-28deg);

请注意，不允许按比例缩放0。因此，您需要为比例使用非常小的值，而不是零。

备注的

你的形状都有一个相同的变换（translate(-152.27, -120.27)）。为了减少复杂性，我将所有省略号放在父组中，并将公共变换移动到该组。

最后，请注意还有一个复杂因素。当您按比例缩放时，您不仅缩放椭圆的宽度，还缩放椭圆线的宽度。当你开始制作动画时，这可能会破坏正确3D旋转的错觉。

.rotate-and-scale {
  transform-origin: 230.7px 198.4px;
  transform: rotate(28deg) scale(0.01, 1) rotate(-28deg);
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -100 500.47 500.47">
        <defs>
            <style>
                .cls-12,
                .cls-8 {
                    fill-rule: evenodd;
                }

                .cls-8 {
                    fill: url(#radial-gradient-8);
                }

                .cls-12 {
                    fill: url(#radial-gradient-12);
                }

            </style>
            <radialGradient id="radial-gradient" cx="232.26" cy="170.66" r="36.06" gradientTransform="translate(-138.19 -72.22) scale(1.59)"
                gradientUnits="userSpaceOnUse">
                <stop offset="0.35" stop-color="#00aeef" />
                <stop offset="1" stop-color="#00609c" />
            </radialGradient>
            <radialGradient id="radial-gradient-8" cx="232.4" cy="170.47" r="38.82" xlink:href="#radial-gradient" />
            <radialGradient id="radial-gradient-12" cx="231.93" cy="170.21" r="48.97" xlink:href="#radial-gradient" />
        </defs>
        <title>fadsf</title>

        <g transform="translate(-152.27 -120.27)">
        <path class="svg-spinner0 cls-12" d="M175,143a77.74,77.74,0,1,0,55-22.77A77.26,77.26,0,0,0,175,143Zm.67,109.26A76.8,76.8,0,1,1,230,274.78,76.34,76.34,0,0,1,175.7,252.29Z" />

        <path class="svg-spinner2 cls-8" d="M248.31,129c-8.67,2.55-18.08,8.5-27.18,17.22a137.76,137.76,0,0,0-25,33.25c-9.92,18.15-15.7,37.18-16.23,53.57s4.28,28.4,13.57,33.48c5.52,3,12.14,3.42,19.69,1.22,8.68-2.55,18.08-8.49,27.18-17.21a137.87,137.87,0,0,0,25-33.26,138.19,138.19,0,0,0,14.52-39,90.29,90.29,0,0,0,1.76-17,53.88,53.88,0,0,0-2-15.13c-2.21-7.54-6.13-12.9-11.65-15.91S255.85,126.84,248.31,129ZM194,265.73c-18.61-10.18-17.25-48.65,3-85.77a136.86,136.86,0,0,1,24.8-33c9-8.61,18.25-14.48,26.78-17,7.29-2.14,13.68-1.76,19,1.14s9.06,8.06,11.2,15.33c2.51,8.55,2.57,19.51.18,31.72a137.57,137.57,0,0,1-14.41,38.72h0a137.48,137.48,0,0,1-24.8,33c-9,8.6-18.26,14.48-26.79,17C205.63,269,199.25,268.63,194,265.73Zm71.38-48.41Z" />

        <path class="rotate-and-scale" fill="red" d="M248.31,129c-8.67,2.55-18.08,8.5-27.18,17.22a137.76,137.76,0,0,0-25,33.25c-9.92,18.15-15.7,37.18-16.23,53.57s4.28,28.4,13.57,33.48c5.52,3,12.14,3.42,19.69,1.22,8.68-2.55,18.08-8.49,27.18-17.21a137.87,137.87,0,0,0,25-33.26,138.19,138.19,0,0,0,14.52-39,90.29,90.29,0,0,0,1.76-17,53.88,53.88,0,0,0-2-15.13c-2.21-7.54-6.13-12.9-11.65-15.91S255.85,126.84,248.31,129ZM194,265.73c-18.61-10.18-17.25-48.65,3-85.77a136.86,136.86,0,0,1,24.8-33c9-8.61,18.25-14.48,26.78-17,7.29-2.14,13.68-1.76,19,1.14s9.06,8.06,11.2,15.33c2.51,8.55,2.57,19.51.18,31.72a137.57,137.57,0,0,1-14.41,38.72h0a137.48,137.48,0,0,1-24.8,33c-9,8.6-18.26,14.48-26.79,17C205.63,269,199.25,268.63,194,265.73Zm71.38-48.41Z"/>
        </g>
    </svg>

</html>

Answer 2

所以我似乎可以使用rotate3d来完成我想要的目标。

.svg-spinner3 {
            animation: rotation3 4s infinite linear;
            transform-origin: 50% 50%;
            -webkit-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
        }

        @-webkit-keyframes rotation3 {
            from {
                -webkit-transform: rotate3d(0, 0, 0, 0deg);
            }
            to {
                -webkit-transform: rotate3d(10, 100, 0, 360deg);
            }
        }

https://jsfiddle.net/t8ozqbdf/2/ 这是解决方案的一部分。

Rotating SVG ellipsis paths around the longer axis

2 个答案: