Question

我正在尝试使用WebKitGtk访问SVG文件的元素，但我失败了。该程序在Vala中，它非常简单，只是尝试从几个元素中获取数据：

using Gtk;
using WebKit;

public class WebKitTest : Window {

    private WebView web_view;
    private const string uri = "file:///tmp/test.svg";

    public WebKitTest () {
        set_default_size (800, 600);
        web_view = new WebView ();
        var scrolled_window = new ScrolledWindow (null, null);
        scrolled_window.set_policy (PolicyType.AUTOMATIC, PolicyType.AUTOMATIC);
        scrolled_window.add (this.web_view);
        var vbox = new VBox (false, 0);
        vbox.add (scrolled_window);
        add (vbox);

        this.destroy.connect (Gtk.main_quit);

        show_all ();
        this.web_view.load_uri (WebKitTest.uri);
        var dom = web_view.get_dom_document ();
        var el = dom.get_document_element ();
        var child = el.first_element_child;
        stdout.printf ("%s\n", child.tag_name);

        var list = dom.get_elements_by_tag_name ("svg");
        stdout.printf ("%lu\n", list.length);
        assert (list == null);

        var length = list.length;
        assert (length == 0);

        var svg = list.item (0);
        var res = dom.evaluate ("//path", svg, null, 0, null);
        DOMNode node;
        while ((node = res.iterate_next ()) != null) {
            stdout.printf ("%s\n", (node as DOMElement).tag_name);
        }
    }

    public static void main (string[] args) {
        Gtk.init (ref args);
        var test = new WebKitTest ();
        Gtk.main ();
        return 0;
    }
}

这可以使用 valac --pkg webkitgtk-3.0 --pkg gtk + -3.0 webkittest.vala 进行编译，但如果您只安装了Gtk3，那么您很遗憾需要复制webkit- 1.0 .vapi和.deps文件到新的webkitgtk-3.0文件，并将.deps文件中gdk-2.0和gtk-2.0的出现分别替换为gdk-3.0和gtk-3.0。

我认为使用DOM来访问SVG的子元素会很简单，但只要这段代码到达child.tag_name的print语句，它就会给出“HEAD”，文件中找不到任何内容。我正在加载的文件非常标准，因为我使用inkscape来制作它。

WebKit是否做了一些有趣的事情，我没有看到它加载的文档？

感谢。

更新

似乎WebKit将所有内容加载到HTML文档中，因为当我使用GObject检索Type并为get_elements_by_tag_name（“body”）返回的节点打印它时，我得到了WebKitDOMHTMLBodyElement。因为我可能尝试在DOMDocument上执行以下XPath查询

var nsres = dom.create_ns_resolver (body);
DOMXPathResult res = null;
try {
    res = dom.evaluate ("//*", body, nsres, 0, null);
} catch (Error e) {
    stderr.printf ("%s\n", e.message);
}

DOMNode node;
try {
    while ((node = res.iterate_next ()) != null) {
        stdout.printf ("%s\n", (node as DOMElement).tag_name);
    }
} catch (Error e) {
    stderr.printf ("%s\n", e.message);
}

我输出的所有内容都是

HTML
HEAD
BODY

我现在迷路了。 SVG文件显然正确加载但它不是文档的一部分？

Answer 1

我相信Webkit有一个怪癖，如果它不知道文档的MIME类型，它会将它包装在<html>标签中。因此，我怀疑您尝试访问的文档已被Webkit转换为类似：

<html>
  <head />
  <body>
    <svg>...etc...</svg>
  </body>
</html>

这就是您在代码中看到<head>标记的原因。

作为建议，请尝试使用Vala等效的getElementsByTagName（）来查找<svg>标记。通过快速浏览文档，它应该是这样的：

    var dom = web_view.get_dom_document();
    var el = dom.get_elements_by_tag_name("svg").item(0);
    var child = var child = el.first_element_child;

或者，如果有办法告诉WebKit / WebFrame该文件的MIME类型是“image / svg + xml”，那么这也应该可以解决您的问题。

使用WebKit处理SVG DOM

1 个答案: