Animation SVG在画布中时,SVG动画不工作?

Animation SVG在画布中时,SVG动画不工作?,animation,canvas,svg,Animation,Canvas,Svg,我需要SVG的动画和画布的“飞行”转换相同。为什么这在任何浏览器中都不起作用 编辑: 所以,在进一步研究之后,我意识到,如果SVG被放在画布标签中,动画就不起作用了,那个橙色的球就静止不动了。我发现如果我一直在刷新画布,动画就会继续 为什么是SVG,为什么是画布 SVG是一种很棒的格式,你可以用它画出很棒的动画图像,而且文件大小非常小(互联网流量) Canvas作为SVG容器,因为Canvas提供了非常简单的自我转换方法(旋转、缩放等),例如,我想将图像旋转45度并缩放3次。因为它是SVG,所以

我需要SVG的动画和画布的“飞行”转换相同。为什么这在任何浏览器中都不起作用

编辑:

所以,在进一步研究之后,我意识到,如果SVG被放在画布标签中,动画就不起作用了,那个橙色的球就静止不动了。我发现如果我一直在刷新画布,动画就会继续

为什么是SVG,为什么是画布

SVG是一种很棒的格式,你可以用它画出很棒的动画图像,而且文件大小非常小(互联网流量)

Canvas作为SVG容器,因为Canvas提供了非常简单的自我转换方法(旋转、缩放等),例如,我想将图像旋转45度并缩放3次。因为它是SVG,所以图像质量仍然很好,因为它是画布,所以我可以用一行代码进行转换,只需将转换矩阵应用到它

看来我找到了我问题的答案是:

如果SVG本身包含动画,则只有在我不断刷新画布标记时,它才会起作用。

不好的是(这个问题没有实现),我需要的转换不是仿射转换,而是投影转换,画布不支持。是投影变换的一个例子(我在这里找到了这个问题的答案),但它还没有完全完成,如果您尝试将它作为SVG文件上方的输入图像(带有动画),它将无法工作,除非您不断移动其中一个方块(在背景中刷新画布)

我希望这件事能澄清(我认为这个问题有-3点不清楚)

编辑2好的,WTF真的支持那些反对票吗?他们中有3人,我根据别人的建议编辑了我的问题,现在我又看到一张反对票。欢迎投票否决此问题的人(第四位)说出原因。

将SVG转换应用于无法控制的SVG文件:

<svg>
    <g transform="scale(0.5) rotate(45) skewX(20) skewY(5)" >
        <foreignObject width="400" height="400">
            <body xmlns="http://www.w3.org/1999/xhtml">
                <object data="http://svg-whiz.com/svg/animation/autoOrient.svg" 
                        type="image/svg+xml"
                        width="400" height="400">
                </object>
            </body>
        </foreignObject>
    </g>
</svg>


我不知道,您在任何浏览器中都在尝试什么?例如,在SVG文件中定义了动画(如下所示)[.然后我需要像旋转或缩放一样对其应用转换。但我仍然希望svg被动画化。但问题是,如果我将src标记放在画布标记中,svg没有动画化,它只是保持静止。如果我将svg放在简单div中,它会动画化,但我会从画布中释放选项(转换)我的意思是:向我们展示你的代码。你能在
canvas
中做哪些在SVG中做不到的转换?想象一下(这个)[示例图像是动画SVG文件。我无法控制将要使用的SVG,但我希望将转换应用于其画布容器。请编辑您的问题,使其更具体,并将信息包括在这些评论以及任何其他重要信息中。现在的问题非常模糊和不清楚。Tnx的建议。通过使用它,不需要画布。