<路径>在

发布于 2024-12-09 06:25:53 字数 2660 浏览 0 评论 0原文

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

最终效果或多或少应该如下所示：

<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文件保存到硬盘并在浏览器中打开它，会显示路径（这意味着源已正确更新）。

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

感谢您的帮助！

编辑： 事实证明，如果我想绘制元素，则可以使用 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 文件并在浏览器中打开它，它就会成功。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浪菊怪哟 2024-12-16 06:25:53

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

因此，在上面给定的代码中，将：替换

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

为：

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

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

回复收藏 0 原文

丑疤怪 2024-12-16 06:25:53

问题似乎是没有为 svg 定义命名空间。另外，如果 svgs 设置在 ComplexPanel 中，则似乎只能在 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);
    }-*/;
}

将其添加到根面板会绘制指定的路径。

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

问候，
斯特凡

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

回复收藏 0 原文

~没有更多了~