使用< iframe& gt;的差异和& lt; embed& gt;用于显示SVG和脚本 [英] Differences in using <iframe> and <embed> for displaying SVG and scripting

问题描述

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

I'm trying to create Dynamic SVG graphics, it is my understanding that the only way to create dynamic SVG is to use a scripting language, so I have a few questions, basically I'd like to load or embed the SVG to a HTML web page and control the graphics using Inputs in the web page, rather than hardcoding the ECMAscript in the SVG file. I'm not entirely sure if I should use the embed tag or an iframe for displaying the SVG here are my doubts regarding SVG and scripting:

1. 使用<iframe>或<embed>标签访问SVG元素有什么区别(在脚本方面)?也许有人可以提供简单的示例.
2. SVG是否可以评估元素属性中的数学表达式(请确保)?

1. Whats the difference (in terms of scripting) in using an <iframe> or and <embed> tag for accessing the SVG elements?, maybe someone can include simple examples.
2. Can SVG evaluate math expressions in element attributes(just to be sure)?

推荐答案

请勿使用<iframe>或<embed>.相反，您可以将SVG直接嵌入XHTML中，如下所示:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

Don't use either <iframe> or <embed>. Instead, embed your SVG directly in XHTML like so:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

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

With that, you have full access to the SVG DOM as part of your document. As shown in that example, you simply need to be certain to create SVG elements (but not attributes) using the SVG namespace. You must also ensure that your web host is sending the content type for xhtml as application/xhtml+xml or text/xml, not 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文件，就像内联元素一样流动文字.

For more examples of JavaScript manipulating SVG mixed with HTML, see the various .xhtml files in that same directory. A particularly compelling example is this one, which dynamically creates hundreds of small SVG files as inline elements flowing like text.

关于您的问题:

SVG是否可以评估元素属性中的数学表达式(请确定)?

一般而言，不.但是，使用 SMIL动画确实可以指定各种插值方法随时间变化的属性.

Not in general, no. However, the usage of SMIL Animation does allow you to specify various interpolation methods of properties over time.

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

Finally, note that you don't have to put SVG in HTML to make it dynamic. You can script SVG with JavaScript directly. For example, see this test file (press the green button to start simulation):
http://phrogz.net/svg/SpringzTest.svg

这篇关于使用< iframe& gt;的差异和& lt; embed& gt;用于显示SVG和脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！