Fatal编程技术网
  • dom/
  • <；路径>；内部创建<；svg>；使用GWT DOM类不会'；我不会出现在屏幕上

<；路径>；内部创建<；svg>；使用GWT DOM类不会'；我不会出现在屏幕上

dom gwt svg

<；路径>；内部创建<；svg>；使用GWT DOM类不会'；我不会出现在屏幕上,dom,gwt,svg,Dom,Gwt,Svg,我想只使用DOM操作（通过DOM类）在GWT中创建一个简单的SVG图形。最后（在使用GWT编译器编译之后），我希望在元素中有一个元素 最终效果应该大致如下所示： <html> <body> <svg> <path stroke="black" d="M200 200 L300 150"></path> </svg> </body> </html> 问题是路径没有显示在浏览器中（我只

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

最终效果应该大致如下所示：

<html>
 <body>
  <svg>
   <path stroke="black" d="M200 200 L300 150"></path>
  </svg>
 </body>
</html>
问题是路径没有显示在浏览器中（我只能看到白色背景）。非常有趣的是，如果我通过浏览器看到页面的源代码，将整个源代码（从
复制到
），将其粘贴到文本编辑器中的新空白文档中，将其作为HTML文件保存到硬盘并在浏览器中打开，则会显示路径（这意味着源代码已正确更新）

为什么路径第一次不显示在屏幕上（第二次显示）

谢谢你的帮助

编辑： 事实证明，如果我想绘制一个
元素，那么使用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>
路径上的文本不会显示。当然，如前所述，如果我将生成的源代码复制到一个新的HTML文件并在浏览器中打开它，它就会这样做。

问题似乎是没有为svg定义名称空间。此外，SVG似乎只有在设置为复杂面板时才使用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);
    }-*/;
}
将其添加到根面板将绘制指定的路径

资料来源：

问候,，
Stefan

我认为您需要使用setAttributeNS，传入xlink名称空间

因此，在上述给定代码中，替换：

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

谢谢你，Stefan，你的回答非常有用。你说得对，现在
元素确实出现了（它被渲染了）。我上面描述的问题是另一个类似目标的简单性。我想要实现的是一个沿着路径的文本，它是
中的
元素。不幸的是，将您的解决方案与ComplexPanel和XML名称空间结合使用是行不通的。简单的测试用例和其他细节将添加到我的初始问题中。是的，它可以工作！谢谢你，埃里克。当然，textPath元素没有setAttributeNS方法（我猜您使用了一个心智快捷方式）。所以我创建了一个JSNI方法
private native void setAttributeNS（String uri，elem，String attr，String value）/*-{elem.setAttributeNS（uri，attr，value）；}-*/
并使用合适的参数调用它。 
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);
    }-*/;
}

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

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