围绕长轴旋转 SVG 省略号路径

Question

所以我 this 徽标是用 SVG 写的。

我正在尝试围绕它们的长轴旋转分组椭圆，以创建 3D 旋转的错觉。

    .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%;
}

围绕中心旋转它们似乎是 easy，但我似乎无法弄清楚如何旋转它们（或者至少 skew/shrink 它们朝向轴旋转，直到它们变成一条线，然后返回）。

是不是太难做了？请记住，我是一个完整的 SVG 新手。

谢谢！

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/ 这是解决方案的一部分。

围绕长轴旋转 SVG 省略号路径

Rotating SVG ellipsis paths around the longer axis

javascript

html

css

svg

rotation