在GWT中使用SVG

我想知道是否可以在面板中包含SVG内容(或者在GWT中可以使用的任何内容),能够以编程方式向SVG添加更多内容(如添加圆圈或曲线),并处理鼠标事件(这将是在SVG或GWT？).我尝试创建一个HTML对象,添加以下内容:

这不起作用(在输出中没有任何可见),但我不确定是不是因为我做错了或者不允许.

我能够使用Google Visualization的LineChart在GWT中做一个简单的例子,但我想摆脱Google Visualization并能够自己生成SVG并进一步自定义它.我环顾四周,许多资源指向使用Canvas,但我不确定这是否是最好的路线.

我对这里的例子也有些困惑.我尝试了一个简单的复制粘贴它在本地尝试,它似乎根本没有用.然而,我能够得到另一个样本只使用HTM(嵌入src指向SVG文件)L +单独的SVG文件,但我无法使用GWT使用RootPanel.get(...)访问它.

编辑:我读过SVG没有使用托管浏览器和编译它确实有效,但我不确定如何引用SVG(我已经放入HTML中).如果我可以访问它,那么大概我可以添加到它的innerHTML.我已经尝试过RootPanel.get("hi").getElement().setInnerHTML("...")但这似乎不起作用或者我搞砸了？ 我想我的目标是能够操作我以某种方式链接的SVG文件(无论是在GWT中还是在HTML中),并能够根据用户的输入进行修改.

第二次编辑 到目前为止,我一直在实际的SVG文件中编写功能.在我们的设置中,我们的SVG是一个嵌入式对象,我们将"文档"传递给嵌入式SVG.由于HTML可以访问我们的SVG函数并且SVG可以访问"文档",因此从嵌入对象传递信息到HTML和从HTML传递是非常可行的.

有更透明的方式(Rapahel)FireBug可以直接看到SVG,这很好但现在不是很必要.到目前为止,我认为我所看到的任何解决方案都不是IFrame,但我可能错了.一点警告,SVG有时候会很慢.

我会说我的问题已经解决了(有点？)但是我现在还没有使用Raphael,jQuery和GWT,但是如果我想使用GWT,我在答案中描述的方法仍然有效.

我不完全理解为什么,但createElementNS JavaScript方法允许您在html中创建并正确格式化xhtml.

因为在资源管理器中没有等效项,所以GWT不实现createElementNS,但您可以使用快速的本机方法:

private static native Element createElementNS(final String ns, 
        final String name)/*-{
    return document.createElementNS(ns, name);
}-*/;

将它放入SVGPanel类是有意义的.

import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.ComplexPanel;

public class SVGPanel extends ComplexPanel{

    private static final String SVG_NAMESPACE = "http://www.w3.org/2000/svg";

    public SVGPanel() {
        setElement(createElementNS(SVG_NAMESPACE, "svg"));
        showcaseSVG(); //Demonstrate that SVG works! Inexplicably!
    }

    private void showcaseSVG(){
        Element svgElement = createElementNS(SVG_NAMESPACE, "circle");
        svgElement.setAttribute("cx", "50");
        svgElement.setAttribute("cy", "50");
        svgElement.setAttribute("r", "30");
        getElement().appendChild(svgElement);
    }
}

这应该在添加到您的程序时生成一些简单的SVG.恭喜!你现在坚持xhtml人.

哇.这个问题已经暂时搁置了一段时间. - 一个梦幻般的(确定的？)GWT SVG库已经发布了!见lib-gwt-svg.那里没有任何东西差不多好.作者(Lukas Laag)一直非常敏感,并一直在努力保持图书馆的最新状态.以上链接将带您进行一些令人印象深刻的演示,您可以随时参加lib-gwt-svg论坛.

我们只是开源了一个GWT小部件,允许您将GWT与Raphael集成:http: //code.google.com/p/raphaelgwt/

这个小部件最初是为Hydro4GE创建的,并在官方GWT博客上的文章中提到过.