使用<iframe>和<embed>显示SVG和脚本的差异

Question

我正在尝试创建动态SVG图形,我的理解是创建动态SVG的唯一方法是使用脚本语言,所以我有几个问题,基本上我想加载或嵌入SVG到HTML网页并使用网页中的输入控制图形,而不是在SVG文件中对ECMAscript进行硬编码.我不完全确定我是否应该使用embed标签或iframe来显示SVG这里是我对SVG和脚本的怀疑:

1. 使用<iframe>or和<embed>标签访问SVG元素的区别(在脚本方面),也许有人可以包含简单的例子.
2. SVG可以在元素属性中评估数学表达式(只是为了确定)？

Answer 1

不要使用<iframe>或<embed>。相反，将 SVG 直接嵌入到 XHTML 中，如下所示：
http://phrogz.net/svg/svg_in_xhtml5.xhtml

这样，您就可以完全访问 SVG DOM 作为文档的一部分。如该示例所示，您只需确保使用 SVG 命名空间创建 SVG 元素（但不是属性）。您还必须确保您的网络主机将 xhtml 的内容类型发送为 或application/xhtml+xml，text/xml而不是text/html。

phrogz$ curl --silent -I http://phrogz.net/svg/svg_in_xhtml5.xhtml | grep "Type"
Content-Type: application/xhtml+xml

有关 JavaScript 操作与 HTML 混合的 SVG 的更多示例，请参阅同一目录中的各种 .xhtml 文件。一个特别引人注目的示例是这个，它动态创建数百个小型 SVG 文件作为像文本一样流动的内联元素。

对于你的问题：

SVG 可以计算元素属性中的数学表达式吗（只是为了确定）？

一般而言不是，不是。但是，使用SMIL 动画确实允许您随时间指定属性的各种插值方法。

最后，请注意，您不必将 SVG 放入 HTML 中才能使其动态化。您可以直接使用 JavaScript 编写 SVG 脚本。例如，请参阅此测试文件（按绿色按钮开始模拟）：
http://phrogz.net/svg/SpringzTest.svg