使用<iframe>和& lt; embed>用于显示SVG和脚本

Differences in using <iframe> and <embed> for displaying SVG and scripting

本文关键字：显示 SVG 脚本 用于 embed 使用 lt iframe      更新时间：2023-09-26

我正在尝试创建动态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元素(而不是属性)。你还必须确保你的网络主机发送的内容类型为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混合的更多示例，请参阅同一目录下的各种.xhtml文件。下面是一个特别引人注目的例子，它动态地创建了数百个小SVG文件作为内联元素，像文本一样流动。

对于你的问题:

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

一般来说没有。然而，SMIL Animation的使用确实允许您随时间指定属性的各种插值方法。

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

使用or和标记访问SVG元素有什么区别(在脚本方面)?

<iframe>:

试图访问框架内容的脚本遵循同源策略，如果从不同的域加载，则无法访问其他窗口对象中的大多数属性。这也适用于框架内试图访问其父窗口的脚本。跨域通信仍然可以通过window.postMessage实现。

来源:https://developer.mozilla.org/en/HTML/Element/iframe脚本

我们通过iframe_element.contentWindow方法访问iframe内容:

<html>
  <body>
    <iframe id="SVG_frame" src="image.svg"></iframe>
  </body>
  <script>
    var SVG_frame = document.getElementById ( "SVG_frame" );
    var SVG_content = null;
    function getContent ()
    {
      SVG_content = SVG_frame.contentWindow;
      SVG_content ? alert ( "YAY!" ) : alert ( "BOO!" );
    }
      SVG_frame.onload = getContent;
  </script>
</html>

<embed>:

示例(查看源代码):https://jwatt.org/svg/demos/scripting-across-embed.html

(至少在Chromium中这两种方法都失败)

<object>

示例(查看源代码):https://jwatt.org/svg/demos/scripting-across-object.html

SVG能否对数学表达式求值元素属性(只是为了确定)?

like <element attribute="48/2*(9+3)"/> ?

我没有在SVG规范中找到关于它的一个字。

编辑

我个人建议使用<object> + Data URI Scheme和/或object_element.contentDocument。我在chrome和Firefox上都测试过了。

啊哈!<object>具有与<iframe>相似的安全行为:域，站点和SVG文件的协议必须相同。

EDIT2

如果您对如何使标记矢量图形在没有插件的情况下在Internet Explorer中工作感兴趣，那么矢量标记语言就是方法。

嗯，这取决于你对动态的定义。在大多数情况下，是的，您可能需要脚本。无论将脚本放在HTML文件还是SVG文件中都没有区别，它们都将由同一个引擎执行。

您可以使用声明性动画元素(又名SMIL)创建交互式/动画svg内容。你也可以用CSS做简单的悬停效果:悬停规则，或者用CSS3转场。

XSLT还可以用于制作动态svg内容，因为它可以将输入转换为其他内容。但它没有涵盖交互方面。

可以从包含svg元素的HTML文件中使用以下任意一种方式访问svg元素:

theEmbeddingElement.contentDocument(首选，但不适用于<embed>)或theEmbeddingElement.getSVGDocument() .

相关文章：