使用WebKit处理SVG DOM_Svg_Webkit_Vala

使用WebKit处理SVG DOM

svg

使用WebKit处理SVG DOM,svg,webkit,vala,Svg,Webkit,Vala,我试图使用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_d

我试图使用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 webkitest.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检索类型并为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文件显然加载正确，但它不是文档的一部分？

我认为Webkit有一个怪癖，如果它不知道文档的MIME类型，它会将其包装在

标记中。因此，我怀疑您试图访问的文档已被Webkit转换为如下内容：

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

    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文档的MIME类型。你的建议仍然没有返回任何内容，因此我将继续玩下去。如果文件是从web服务器获取的，它将（或应该）获取MIME类型。这是因为它位于HTTP头中。但是您通常不会使用来自文件系统的文件。