javascript – 使用和显示SVG和脚本的差异

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

>使用< iframe>时的差异(就脚本而言)是什么？或者< embed>用于访问SVG元素的标记？也许某人可以包含简单的示例.
> SVG可以在元素属性中评估数学表达式(只是为了确定)？

解决方法

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

这样,您就可以完全访问SVG DOM作为文档的一部分.如该示例所示,您只需确保使用SVG名称空间创建SVG元素(但不是属性).您还必须确保您的Web主机正在将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操作SVG与HTML混合的更多示例,请参阅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