Question

我需要SVG用于动画和画布，以便对其进行“即时”转换。为什么这不适用于任何浏览器？

修改

因此，经过一番研究后，我意识到如果将SVG放在canvas标签中，像this这样的动画不起作用，那橙色的球就会保持静止。我发现如果我一直刷新画布，动画会继续。

为什么选择SVG以及为什么选择画布？

SVG是一种很棒的格式，您可以使用它绘制出色的动画图像，文件大小非常小（互联网流量）。

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

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

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

坏事是（并且不是这个问题），我需要的变换不是仿射变换，而是有投射变换，而且画布根本不支持。 Here是投影变换的一些例子（这是我找到这个问题的答案的地方）但是它还没有完成，如果你尝试它并在SVG文件上面作为输入图像（带动画）它就不会除非你经常移动4个方格中的一个（在背景中刷新画布）。

我希望这会让事情变得清晰（我看到-3这个问题的声誉，因为它还不清楚）

编辑2 好的，WTF真的与那些选票有关吗？其中有3个，我在其他人的建议上编辑了我的问题，现在又看到了一个投票。请投票支持这个问题的人（第4人），并说明为什么会这样做。

Answer 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>

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

1 个答案: