2
DOM操作のみを使用して（DOMクラスを使用して）GWTで単純なSVGグラフィックスを作成したいとします。最終的に（GWTコンパイラでコンパイルした後に）、要素を<svg>要素内に入れたいと思います。<path> inside <svg> GWT DOMクラスを使用して画面に表示されない
次のように最終的な効果は、多かれ少なかれ、になります。ここでは
<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ファイルとして保存して開きますブラウザでは、パスが表示されます（ソースが正しく更新されたことを意味します）。
なぜ初めてパスが画面に表示されないのですか？（2回目に表示されます）
ありがとうございました！
編集： それはComplexPanelを使用して、判明、私は<path>要素を描きたい場合は、XML名前空間が作品のよう。しかし今、に沿ってというテキストを描きたいと思います。
最終的な効果は、次のようになります。パスに沿ってテキストがまで表示されません
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);
}-*/;
}
：
<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コードを。もちろん、以前のように、生成されたソースを新しいHTMLファイルにコピーしてブラウザで開くと、
はい、**作品**！ありがとう、エリック。もちろん、textPath要素にはsetAttributeNSメソッドがありません（あなたは精神的なショートカットを使用したと思います）。そこで私は、JSNIメソッド 'private native void setAttributeNS（String uri、Element elem、String attr、String value）を作成しました/ * - { \t \t \t elem.setAttributeNS（uri、attr、value）; \t \t} - * /; '適切なパラメータで呼び出されます。 – DeprecatedMethod
精神的なショートカットはなく、サンプルコードをコピーして貼り付けただけです:) –