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

发布于 2024-12-22 09:28:59 字数 948 浏览 2 评论 0原文

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

编辑：

因此，经过更多研究后，我意识到，如果将该 SVG 放入 canvas 标签内，则动画会像这不起作用，那个橙色球只是保持静止。我发现如果我一直刷新画布，动画就会继续。

为什么是 SVG，为什么是 canvas？

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

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

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

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

坏事是（并且它与这个问题）我需要的变换不是仿射变换，而是有投影变换，而且画布根本不支持。这里是投影变换的一些示例（这就是我找到这个问题的答案的地方）但它还没有完全完成，如果你尝试它并在 SVG 文件（带动画）上方提供输入图像，它将无法工作，除非你不断移动这 4 个方块之一（在后台刷新画布）。

我希望这能解决问题（我看到这个问题的声誉为 -3，因为不清楚）

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦与时光遇 2024-12-29 09:28:59

以下是将 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>

Here is an example of applying an SVG transform to an SVG file you have no control over:

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

回复收藏 0 原文

~没有更多了~