在 SVG 和画布之间，哪个更适合操作/动画多个图像？也许两者都没有，只使用 css3 转换？

Posted 2023-03-06

【中文标题】在 SVG 和画布之间，哪个更适合操作/动画多个图像？也许两者都没有，只使用 css3 转换？

【英文标题】：Between SVG and canvas, which is better suited for manipulating/animating several images? Maybe neither and just use css3 transforms?

【发布时间】：2011-07-07 18:25:40

【问题描述】：

问题的第二部分是，哪个 javascript 库更好/更容易处理图像？我实际上不会画任何形状或任何东西。其他信息：我将使用 jQuery，不需要支持所有浏览器，只需要支持 webkit。

编辑： 更多信息：当前的设计是在网格状布局中布局/绘制几行/列图像，中心的图像处于“焦点”（稍大一点，有边框或其他东西，旁边有一些文字它）。棘手的是，我们希望整个图像画布看起来可以滑动/滑过，以使另一个随机图像成为焦点。所以很明显，这个网格中的图像数量需要超过视口中可见的数量，这样当转换发生时，总是有图像占据画布。除了移动图像外，我不会模糊它们或以其他方式修改它们。最终，我们将添加用户交互，例如单击/触摸可见图像以使其手动聚焦。

如果这不清楚或仍然令人困惑，请告诉我。

我遇到了scripty2，这似乎是我使用 canvas/SVG 的替代方案。昨晚我也开始用EaselJS 放屁，这似乎可行，但我想知道它是否最终会比仅使用标准 html/CSS 和像 Scripty2 这样的工具来帮助工作/复杂带有动画和点击/触摸事件。只是寻找任何建议。谢谢！

【问题讨论】：

您能否提供一个粗略的描述或链接到与您打算做的类似的事情？答案取决于许多因素，但在你的情况下，我猜它介于画布和 css3 转换之间。

【参考方案1】：

答案取决于您的操作和动画。

如果只是翻译，CSS wins for speed 与画布相比。我还没有测试过，但我有信心在同样的事情上它很容易击败 SVG。

如果您要进行非仿射变换或以其他方式处理图像（例如模糊它们），您显然需要 Canvas。

如果您需要每个对象的事件处理程序，您显然需要一个保留模式的绘图系统，如 SVG 或 HTML+CSS。我没有做足够多的 CSS3 转换来说明它们在速度方面与 SVG 的比较，但它们显然没有 SVG 的强大 transformation DOM。

这是一个相当主观的问题（或一组问题），您还没有提供足够的信息来获得明确的答案。

【讨论】：

@Phorgz 我也有类似的情况。看看我的问题***.com/questions/21511707/storing-design-information/…