Question

我想在GWT中仅使用DOM操作（通过DOM类）创建一个简单的SVG图形。最终（在使用GWT编译器编译之后），我想在<path>元素中有一个<svg>元素。

最终效果应该或多或少地看起来如下：

<html>
 <body>
  <svg>
   <path stroke="black" d="M200 200 L300 150"></path>
  </svg>
 </body>
</html>

这是应该产生这种效果的java GWT代码：

    Element svg = DOM.createElement("svg");
    Document.get().getBody().appendChild(svg);

    Element path = DOM.createElement("path");
    path.setAttribute("stroke", "black");
    path.setAttribute("d", "M200 200 L300 150");
    svg.appendChild(path);

问题是路径没有显示在浏览器中（我只能看到白色背景）。有趣的是，如果我通过浏览器看到页面的来源，请复制整个源代码（从<html>到</html>），将其粘贴到文本编辑器中的新空白文档中，将其保存到将硬盘作为HTML文件并在浏览器中打开，显示路径（表示源已正确更新）。

为什么路径第一次没有出现在屏幕上（并且第二次显示）？

感谢您的帮助！

修改事实证明，如果我想绘制<path>元素，使用ComplexPanel和XML命名空间是有效的。但现在我想在路径上绘制文本。

最终效果应如下所示：

<svg>
 <defs>
  <path id="myPath" stroke="black" d="M75,20 a1,1 0 0,0 100,0"></path>
 </defs>
 <text x="10" y="100">
  <textPath xlink:href="#myPath">Text along a curved path...</textPath>
 </text>
</svg>

应生成它的java代码：

class SVGPanel extends ComplexPanel {
    private static final String SVG_NAMESPACE = "http://www.w3.org/2000/svg";

    public SVGPanel() {
        setElement(createElementNS(SVG_NAMESPACE, "svg"));
        showcaseSVG();
    }

    private void showcaseSVG() {
        Element defs = createElementNS(SVG_NAMESPACE, "defs");
        getElement().appendChild(defs);

        Element path = createElementNS(SVG_NAMESPACE, "path");
        path.setAttribute("id", "myPath");
        path.setAttribute("stroke", "black");
        path.setAttribute("d", "M75,20 a1,1 0 0,0 100,0");
        defs.appendChild(path);

        Element text = createElementNS(SVG_NAMESPACE, "text");
        text.setAttribute("x", "10");
        text.setAttribute("y", "100");
        getElement().appendChild(text);

        Element textPath = createElementNS(SVG_NAMESPACE, "textPath");
        textPath.setAttribute("xlink:href", "#myPath");
        textPath.setInnerText("Text along a curved path...");
        text.appendChild(textPath);
    }

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

路径中的文字未显示。当然，和以前一样，如果我将生成的源文件复制到新的HTML文件并在浏览器中打开它，那就可以了。

Answer 1

我认为你需要使用setAttributeNS，传入xlink命名空间。

所以在上面给出的代码中，替换：

textPath.setAttribute("xlink:href", "#myPath");

使用：

textPath.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#myPath");

Answer 2

问题似乎是没有为svg定义名称空间。如果它们在ComplexPanel中设置，那么svgs似乎只能在GWT中绘制....

无论如何这里是一个如何用GWT绘制SVG元素的例子。

package XXXXXXX;

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);
    }

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

将其添加到rootpanel会绘制指定的路径。

资料来源：http://de.w3support.net/index.php?db=so&id=691809

此致斯蒂芬

使用GWT DOM类在<svg>内创建的<path>不会出现在屏幕上</svg> </path>

2 个答案: