Question

我有关于动画SVG的问题。我获得了一个旋转令牌的3D影片剪辑，它会改变颜色以尝试使用SVG重新创建。我尝试在defs中使用动画的radialGradient标签，但它看起来不一样，因为在电影中，颜色以抛物线形状环绕，但是当我使用radialGradient时，它看起来就像一个颜色的圆圈移动令牌图像。有SVG经验的人是否有任何关于如何最好地完成此任务的想法？是否可以使用不同的填充梯度？或者我是否需要考虑使用像three.js这样的东西？或者我应该尝试嵌入影片剪辑？我真的很感激任何反馈！我试图复制的电影剪辑：https://trello-attachments.s3.amazonaws.com/5a8b15437a02ee5d87991772/5b1aa52382aa1411afffc12c/fb7d36d4c45dfda665b9d0ee46231b8a/DIwala_Token_(Converted)_Test.m4v 我尝试使用SVG radialGradient：https://github.com/SashaBajzek/diwala-frontpage-firebase/blob/fe08ea16f2885fb78846212fabfb3bda41863595/src/components/animated_token/AnimatedToken.tsx

import * as React from 'react';

export default function AnimatedToken(props: any) {
    return(
        <svg viewBox="0 0 700 666" className="AnimatedToken">
            <defs>
                <radialGradient id="smallGradient" fx="50%" fy="50%">
                    <stop offset="0%" stop-color="#FFDE7E"/>
                    <stop offset="75%" stop-color="#BC41B0"/>
                    <stop offset="100%" stop-color="#7C07C9"/>
                    <animate attributeName="fx" dur="10s" from="100%" to="0%" repeatCount="indefinite" />
                </radialGradient>
            </defs>
            <g>
                <g>
                    <path fill="url(#smallGradient)" d="M337,1c8.7,0,17.3,0,26,0c2.4,0.5,4.9,1,7.3,1.4c31.6,5.3,60.3,18.1,87.2,34.8c64.9,40.2,122.7,88.9,172,147.3
          c25.4,30.1,46,63.2,60.8,100c11,27.3,12.8,54.4,3.7,82.5c-6.4,19.8-15,38.5-25.6,56.3c-17.7,29.8-39.2,56.7-62.3,82.4
          c-31.2,34.6-63.9,67.5-102.4,94.1c-24,16.6-48.3,32.7-74.5,45.8c-21.6,10.8-44.1,18.7-68.3,21.4c-5.3,0-10.7,0-16,0
          c-8.8-1.7-17.8-2.9-26.4-5.3c-37.4-10.4-70.9-28.9-102.5-50.8c-54.6-37.8-102.5-83-144.5-134.2C38.5,436.5,9.6,394,1,341
          c0-7.7,0-15.3,0-23c0.8-3.2,1.5-6.5,2.3-9.7c8.8-35.2,26.4-66.1,47.9-94.8c42.1-56.3,92.3-104.6,148.3-146.8
          C240.8,35.5,284.9,9.7,337,1z"/>
                </g>
            </g>
        </svg>
    );
}

如何使用SVG创建3D旋转效果

0 个答案: