在 SVG 元素中嵌入快速动画/SWF

Posted 2023-02-16

【中文标题】在 SVG 元素中嵌入快速动画/SWF

【英文标题】：Embeding Quick Animation/SWF in an SVG element

【发布时间】：2016-10-18 04:04:49

【问题描述】：

我卡住了...我有这个项目是用 D3.js 和 html5 构建的，所以我使用了很多带有条形图、饼图等元素的 d3 动画。但是，我的公司现在想要为我们公司设计的某种标志。现在，他们希望这个标志有不同的动画。

所以，基本上有 2 个部分。所有动画都在设计/创建徽标（不是 d3.js 的一部分。这是我们外包的一个完全独立的项目）。然后是我基于 d3.js 构建的项目。

所以，我不知道我需要从动画师那里请求返回什么文件类型。我需要能够嵌入现有的 svg 元素。

我试过鬼混，看看我是否可以在 svg 上获得一个 swf 文件，但我没有任何运气。我确实意识到我可以添加一个 .GIF 文件并且它可以工作，但我觉得我们应该获得一个实际的 .swf 文件或动画的“官方”文件。这是我尝试嵌入 .swf 文件的方法：

svg.append("embed").attr("src": "x");

我也试过了：

svg.append("object").attr("data": "x") .append("embed").attr("src": "x");

它在开发工具中显示了标签，但它没有在页面上呈现..有什么建议吗？

【问题讨论】：

注意“它在开发工具中显示标签”。一切都显示在开发工具中，但这并不意味着它是有效的。例如，如果您执行svg.append("charlesdarwin")，您将拥有：<svg><charlesdarwin></charlesdarwin></svg>，但它当然不会工作......

为什么不在 SVG 中也做 logo。然后可以使用 SMIL、CSS 或 javascript 对徽标进行动画处理，如果您已经知道 SVG 的工作原理，那么将其添加到现有的 SVG 中应该非常简单。

@RobertLongson，徽标正在外包。很可能是由艺术家而不是编码人员完成的，因此动画师可能不喜欢为移动结果编写 CSS 和 JavaScript 等。

如果您想在 SVG 中嵌入 flash，您需要将 flash 放入 object 标签中，并将 object 标签放入 foreignObject 标签中。 IE 不支持 foreignObject。或者将 swf 嵌入 html 页面并使用绝对定位将 SVG 置于顶部。

【参考方案1】：

Flash 可以输出 SVG。 检查这些google results，然后向您的外包设计师提出建议。

如果他们使用的是最新版本，则此功能是内置的：see video guide

如果他们使用的是 CS 5 / CS 5.5 或 CS 6，他们可以试试这个插件：Flash 2 SVG

【讨论】：

所以，当他们将其输出到 SVG 时，应该就像将其附加到现有画布一样简单，对吧？

您也可以使用 CSS 图层（z 索引）将徽标放在其自己的最顶层（浮动）其他内容之上。