<path> created inside <svg> using GWT DOM class doesn't show up in the screen_问答_开发者

I want to create a simple SVG graphics in GWT using only DOM manipulation (via DOM class). Eventually (after compilation with GWT compiler), I want to have a <path> element inside <svg> element.

The final effect should look, more or less, as follows:

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

Here is the java GWT code which should create such effect:

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

The problem is that the path doesn't show up in the browser (I can see only white background). What's very interesting, if I see the source of the page via the browser, copy the whole source (from <html> to </html>), paste it to a new blank document in a text editor, save it to the hard drive as HTML file and open it in the browser, the path is displayed (it means the source is updated correctly).

Why the path doesn't show up in the screen for the first time (and does show up for the second time)?

Thank you for your help!

Edit: As it turns out, using ComplexPanel and XML namespace works if I want to draw a <path> element. But now I want to draw a text along path.

The final effect should look like this:

<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>

The java code which should generate it:

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

The text along path doesn't show up. Of course, as previously, if I copy the generated source to a new HTML file and open it in the browser, it does.

I think you need to use setAttributeNS, passing in the xlink namespace.

So in the given code above, replace:

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

With:

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

Well the problem seems to be that there is no namespace defined for the svg. Also svgs seem to only be drawn in GWT if they are set in a ComplexPanel....

Anyway here is a example how to draw a SVG element with GWT.

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

Adding this to your rootpanel draws the specified path.

Sources: http://de.w3support.net/index.php?db=so&id=691809

Regards, Stefan