javascript - 使用 <iframe> 和 显示 SVG 和脚本的区别

Question

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

1. 使用 <iframe> 有什么区别(在脚本方面)或者和 <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 的更多示例，请参阅 that same directory 中的各种 .xhtml 文件。 .一个特别引人注目的例子是 this one ，它动态创建数百个小型 SVG 文件作为像文本一样流动的内联元素。

关于你的问题:

Can SVG evaluate math expressions in element attributes(just to be sure)?

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

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