当前位置：文江博客话题详情

使用的差异和<嵌入>用于显示 SVG 和脚本</h1> <div class="wt-single-meta"> <span class="wt-info-model">发布于 <span class="timeFormat">2024-11-01 17:02:54</span></span> <span class="wt-info-model">字数 347</span> <span class="wt-info-model">浏览 0</span> <span class="wt-info-model">评论 0</span>  <a class="wt-info-model topicOriginalBtn" data-short_text="Differences in using <iframe> and <embed> for displaying SVG and scripting" href="javascript:"> 原文 <i class="wjsp wjsp-xiangyou"></i> </a> </div> <div class="wt-content "> <p style="height: 180px"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6502133150423173" crossorigin="anonymous" ></script> <ins class="adsbygoogle" style="display: block; text-align: center" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-6502133150423173" data-ad-slot="5397914957" ></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p>  <p>我正在尝试创建动态 SVG 图形，据我所知，创建动态 SVG 的唯一方法是使用脚本语言，所以我有几个问题，基本上我想将 SVG 加载或嵌入到 HTML 中网页并使用网页中的输入控制图形，而不是在 SVG 文件中硬编码 ECMAscript。我不完全确定是否应该使用嵌入标签或 iframe 来显示 SVG，这是我对 SVG 和脚本编写的疑问：</p> <ol> <li>使用 <code><iframe></ 有何区别（就脚本编写而言） code> 或和 <code><embed></code> 标签用于访问 SVG 元素？也许有人可以包含简单的示例。
SVG 可以计算元素属性中的数学表达式吗（只是为了确定）？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

马蹄踏│碎落叶 2024-11-08 17:02:54

请勿使用 </code> 或 <code><embed></code>。相反，将 SVG 直接嵌入到 XHTML 中，如下所示：<br /> <a href="http://phrogz.net/svg/svg_in_xhtml5.xhtml" rel="nofollow">http://phrogz.net/svg/svg_in_xhtml5.xhtml</a>

这样，您就可以完全访问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 操作 SVG 与 HTML 混合的更多示例，请参阅同一目录中的各种 .xhtml 文件。一个特别引人注目的示例是这个，它动态创建数百个小型 SVG 文件作为内联元素，如下所示文本。

对于你的问题：

SVG 可以计算元素属性中的数学表达式吗（只是为了确定）？

一般情况下不行。但是，使用 SMIL Animation 确实允许您指定各种插值方法随着时间的推移的属性。

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

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

回复收藏 0 原文

够运 2024-11-08 17:02:54

使用 or 和标签访问 SVG 元素有什么区别（就脚本而言）？也许有人可以提供简单的示例。

</code>：

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

来源：https://developer.mozilla.org/en/HTML/Element/iframe #Scripting

我们通过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>

：

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

（两种方法均失败至少在 Chromium 中）

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

SVG 可以计算数学表达式吗
元素属性（只是为了确定）？

像？

我在 SVG 规范中没有找到任何有关它的文字。

编辑

就个人而言，我建议使用

啊哈！

EDIT2

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

Whats the difference (in terms of scripting) in using an or and tag for accessing the SVG elements?, maybe someone can include simple examples.

<iframe>:

Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved with window.postMessage.

Source: https://developer.mozilla.org/en/HTML/Element/iframe#Scripting

We access iframe content by iframe_element.contentWindow method:

<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>:

Example (view source): https://jwatt.org/svg/demos/scripting-across-embed.html

(both methods fail at least in Chromium)

<object>

Example (view source): https://jwatt.org/svg/demos/scripting-across-object.html