dom - 在屏幕中,使用 <path> DOM类在 <svg> 内部创建的不会出现

  显示原文与译文双语对照的内容
0 0

我想在GWT中创建一个简单的SVG图形,只使用DOM操作( 通过DOM类) 。 最后,( 。使用GWT编译器编译后),我想拥有 <path> 元素 inside <svg> 元素。

final 效果的外观应该如下所示:


<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命名空间就可以使用。 但是现在我想在path上画一个收费的文字。

final 效果应如下所示:


<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文件中,并在浏览器中打开它,那么。

时间: 原作者:

0 0

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

因此,在上面的代码中,替换:


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

使用:


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

原作者:
0 0

这个问题似乎是没有为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

考虑到了,Stefan

原作者:
...