在 GWT 中使用 SVG

我想知道是否可以在面板中包含 SVG 内容（或者在 GWT 中工作的任何内容），能够以编程方式向 SVG 添加更多内容（例如添加圆或曲线），并处理鼠标事件（这会是在 SVG 或 GWT 中？）。我尝试创建一个 HTML 对象，添加以下内容：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50" cy="50" r="30" />
</svg>

这不起作用（输出中看不到任何内容），但我不确定这是因为我做错了还是不允许。

我能够使用 Google Visualization 的 LineChart 在 GWT 中做一个简单的示例，但我想放弃 Google Visualization，并能够自己生成 SVG 并进一步自定义它。我环顾四周，发现许多资源都指向使用 Canvas，但我不确定这是否是最佳途径。

我对这个例子也有点困惑here https://developer.mozilla.org/en/SVG_In_HTML_Introduction。我在本地尝试了简单的复制粘贴，但似乎根本不起作用。然而，我能够获得另一个仅使用 HTM（嵌入 src 指向 SVG 文件）L + 单独的 SVG 文件的示例，但我无法使用 RootPanel.get(...) 使用 GWT 访问它。

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

2nd EDIT到目前为止，我一直在实际的 SVG 文件中编写功能。在我们的设置中，我们的 SVG 是一个嵌入对象，我们将“文档”传递给嵌入的 SVG。从嵌入对象到 HTML 传递信息是完全可行的，因为 HTML 可以访问我们的 SVG 函数，而 SVG 可以访问“文档”。

有更透明的方法可以做到这一点（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 man 上。