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

问题描述

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

1. 使用< iframe> 或和< embed> 标签有什么区别（在脚本方面）为了访问SVG元素？可能有人可以包含简单的例子。
   
2. SVG能否评估元素属性中的数学表达式（只是为了确定）？
   

解决方案

不要使用< iframe> 或< embed> 。相反，将您的SVG直接嵌入到XHTML中，如下所示：

http://phrogz.net /svg/svg_in_xhtml5.xhtml

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

$ b

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

更多与JavaScript混合使用的JavaScript操作示例，请参阅同一目录中的各种.xhtml文件。一个特别引人注目的例子是这一个，它可以动态地创建数百个小的SVG文件，如内联元素文本。

对您的问题：

SVG能否评估元素属性中的数学表达式（只是可以肯定）？

通常情况下，不会。但是，使用 SMIL动画确实可以指定各种插值方法随着时间的推移属性。

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

http ：//phrogz.net/svg/SpringzTest.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. 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)?

解决方案

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

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

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.

And to your question:

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

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

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>的差异和<嵌入>用于显示SVG和脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！