<path> созданный внутри <svg>с использованием класса GWT DOM не отображается на экране - PullRequest
Новая
       0

<path> созданный внутри <svg>с использованием класса GWT DOM не отображается на экране

3 голосов
/ 12 октября 2011

Я хочу создать простую графику SVG в GWT, используя только манипуляции с DOM (через класс DOM). В конце концов (после компиляции с GWT-компилятором) я хочу, чтобы элемент <path> был внутри элемента <svg>.

Окончательный эффект должен выглядеть более или менее следующим образом: 

<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-файл и откройте его в браузере, путь отображается (это означает, что источник обновлен правильно).

Почему путь не отображается на экране в первый раз (и появляется во второй раз)?

Спасибо за помощь!

Edit: Оказывается, использование ComplexPanel и пространства имен XML работает, если я хочу нарисовать элемент <path>. Но теперь я хочу нарисовать текст вдоль пути .

Окончательный эффект должен выглядеть следующим образом: 

<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-файл и открою его в браузере, это произойдет.

Ответы [ 2 ]

3 голосов
/ 15 октября 2011

Я думаю, что вам нужно использовать setAttributeNS, передавая пространство имен xlink.

Итак, в приведенном выше коде замените: 

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

на: 

textPath.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#myPath");
2 голосов
/ 13 октября 2011

Что ж, похоже, проблема в том, что для svg не определено пространство имен. Также svgs, кажется, отрисовываются в GWT, только если они установлены в ComplexPanel ....

В любом случае, вот пример того, как нарисовать элемент SVG с 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);
    }-*/;
}

Добавление этого к вашей корневой панели рисует указанный путь.

Источники: http://de.w3support.net/index.php?db=so&id=691809

С уважением, Stefan

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...