当 SVG 在画布中时，SVG 动画不起作用？答案

【问题标题】：SVG animation is not working when SVG is in canvas?当 SVG 在画布中时，SVG 动画不起作用？
【发布时间】：2012-01-23 23:45:20
【问题描述】：

我需要用于动画的 SVG 和用于“即时”转换的画布。为什么这在任何浏览器中都不起作用？

编辑：

所以经过更多研究后，我意识到如果将 SVG 放在画布标签内，像 this 这样的动画将无法正常工作，橙色球只会保持静止。我发现如果我一直在刷新画布，动画会继续。

为什么选择 SVG，为什么选择画布？

SVG 是一种很棒的格式，你可以用它来绘制很棒的动画图像，而且文件非常小（互联网流量）。

Canvas 作为 SVG 容器，因为 canvas 提供了非常简单的方法来转换自身（旋转、缩放等）。我想将图像旋转 45 度并缩放 3 倍。由于它是 SVG，图像质量仍然很好，而且由于它是画布，我可以用一行代码进行转换，只需对其应用转换矩阵。

看来我找到了我的问题的答案，它是：

如果 SVG 本身包含动画，那么只有在我不断刷新我的画布标签时它才会起作用。

不好的是（这与这个问题无关）我需要的变换不是仿射变换，而是有投影变换，而且画布根本不支持。 Here 是投影变换的一些例子（这是我找到这个问题的答案的地方）但它还没有完成，如果你尝试它并在 SVG 文件（带动画）上方作为输入图像给出它不会工作，除非您不断移动这 4 个方块中的一个（在后台刷新画布）。

我希望这可以解决问题（我认为这个问题的声誉为 -3，因为它不清楚）

编辑 2 好的，WTF 真的支持那些反对票吗？其中有 3 个，我根据其他人的建议编辑了我的问题，现在我又看到了一个反对票。欢迎对这个问题投反对票的人（第 4 人）说出这样做的原因。

【问题讨论】：

我不知道，您在任何浏览器中都在尝试什么？
例如已在其中定义动画的 SVG 文件，例如 (this)[svg-whiz.com/svg/animation/autoOrient.svg].然后我需要对其应用转换，如旋转或缩放。但我仍然希望该 svg 具有动画效果。但问题是，如果我将 src 标签放在 svg 没有动画的画布标签中，它就会保持静止。如果我将 svg 放在简单的 div 中，它会生成动画，但我会从画布（转换）中丢失选项。
我的意思是：向我们展示您的代码。你可以在canvas 中进行哪些在 SVG 中无法进行的转换？
想象在 (this)[acko.net/files/projective/index.html] 示例图像中是那个动画 SVG 文件。我无法控制将要使用的 SVG，但我希望将转换应用到他们的画布容器。
请编辑您的问题，使其更加具体，并在这些 cmets 中包含信息以及任何其他重要信息。现在的问题非常模糊和不清楚。

标签： animation canvas svg

【解决方案1】：

Here is an example 将 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>

【讨论】：

Tnx 寻求建议。通过使用它，就不需要画布了。