【问题标题】:Inline SVG vs <object> embedded内联 SVG 与嵌入的 <object>
【发布时间】:2013-04-12 21:15:59
【问题描述】:

我正在为 Eve Online 构建游戏内浏览器 RoR 应用。我的应用程序的要求之一是显示由 graphviz 生成的 SVG 图形。在此环境中满足我的要求时遇到了一些问题。

没有适用于 Eve 的 IGB 的官方文档,但 wiki 指出:

新的 EVE Online 游戏内浏览器(代号为 Moondoggie)基于结合两个元素的技术堆栈:

Awesomium:一个中间件层,将渲染的网页作为可被 3D 引擎解析的数据提供。 Awesomium 由 Khrona Software 开发。

Chromium:提供进程间通信、网页渲染、HTTP 通信以及编写 Web 浏览器所需的所有其他基础知识的中间件层。它本身基于 Apple 的 Webkit 框架。 Chromium 是一个主要由 Google 支持的开源项目。

正因为如此,Moondogie 能够通过 Acid3 测试,因此可以支持完整的 HTML 4.01 和 CSS3 规范。

我需要包含在 SVG 中的链接才能访问我的应用程序的 javascript。使用 &lt;embed&gt;&lt;object&gt; 嵌入它会使 SVG 超出我的 JS 文件的范围。

使用&lt;embed&gt;&lt;object&gt; 确实可以在游戏内浏览器中正确呈现 svg。当它像我在下面那样内联时,它会显示一行文本,其中仅包含 SVG 中的文本元素。

更新 这就是我所在的地方。我很确定其中的大部分内容都是多余的,因为仅在我的视图中单独使用render file: 并没有注意到差异。我认为 mime 类型注册更适合与 respond_to 一起使用,但我不确定在这种情况下如何使用它。

主视图的sn-p:

<%= render "map/map" %>

部分视图文件:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg">
<head>
    <title>Embedded SVG</title>
</head>
    <body>
        <%= render file: @map.output_file_path %>
    </body>
</html>

config/initializers/mime_types.rb:

Mime::Type.register "image/svg+xml", :svg  

我不明白为什么它在 &lt;object&gt; 标记内渲染得很好,但在内联时却不行。如何在我的主视图中模拟 &lt;object&gt; 内的环境?或者,如何让 &lt;object&gt; 标记访问我的 javascript 函数?

【问题讨论】:

  • 这是否意味着这个基于 Webkit 的浏览器不支持 HTML5?使用 XHTML 4 是一种选择吗?对于 HTML5 之前的版本,根据我的经验,XHTML 确实是让它发挥作用的最有希望的方式。
  • 有“对 HTML5 的原型支持”,但它似乎受到打击或错过。我不太确定。这就是该浏览器支持和不支持的所有文档。我对 XHTML 不是很熟悉,对 doctype 也不是很熟悉,但我正在看这个:w3.org/QA/2002/04/valid-dtd-list.html。我假设我需要使用其中之一而不是 &lt;!DOCTYPE html&gt; 来使用 XHTML?
  • 只是一个想法。 Google Charts 的功能可能值得一看。他们大量使用了 SVG 和 Javascript,所以你可能会从中得到一些想法。也许您可以深入了解互动画廊developers.google.com/chart/interactive/docs/gallery 上的饼图以获取想法。我认为他们直接使用 标记,这使所有内容都在范围内。
  • 谢谢,我一定会检查一下,看看它是否适用于 IGB。在这一点上,我很高兴能够在游戏之外重现这种行为。
  • 你能发布一个渲染调用的实际渲染输出的例子吗?

标签: javascript ruby-on-rails svg html4


【解决方案1】:

可以从父文档访问 内的文档。这是 ACID3 仍在测试的(太少的)svg 事物之一。

Here's an example 了解如何从父 html 文档中的脚本修改 svg 文档。

【讨论】:

  • 对象/嵌入需要来自父级的事件监听器。这就是我一开始使用 inline 的原因。您可以将事件侦听器添加到 &lt;object&gt; 内的标签中,这些标签从我的父页面调用函数吗?
  • 是的。使用 elm.addEventListener 添加事件侦听器,然后在处理事件的函数中调用,例如 window.parent.yourFunctionInMainDocument(...), ,与此示例略有相似:dahlström.net/svg/html/from-svg-to-parent-html-script.html
猜你喜欢
  • 2022-11-20
  • 2016-03-12
  • 2012-03-10
  • 2015-06-15
  • 2014-06-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-10-22
相关资源
最近更新 更多