HTMl + SVG + JavaScript: изменить текст во время выполнения? - PullRequest
Новая
       12

HTMl + SVG + JavaScript: изменить текст во время выполнения?

5 голосов
/ 30 мая 2011

Я собираюсь перенести несколько приложений на основе Flash в HTML + JavaScript + SVG (единственная целевая машина рендеринга - Webkit).

Я абсолютно новичок в SVG, и я хотел бы знать, могу ли я использовать SVG в качестве изображения шаблона для заполнения экрана и оперативного изменения содержимого текста из кода JavaScript, встроенного в страницу HTML.

Что я хочу сделать: нарисовать базовую структуру страницы в Inkscape (с некоторыми графическими и текстовыми заполнителями), а затем просто отобразить SVG на HTML-странице и заполнить текстовые заполнители с помощью JavaScript.

Я мог бы получить тот же результат , отобразив статическое изображение SVG на заднем плане и поместив поверх него несколько абсолютно позиционированных DIV для отображения текста, но я бы хотел разработать положение, размер и стиль текстовых меток из Inkscape.

Можно ли это сделать? Как?

Я использую Prototype framework , а не JQuery.

Ответы [ 3 ]

6 голосов
/ 30 мая 2011

Попробуйте jQuery. Установите вручную идентификатор для SVG-TextNode, а затем попробуйте: 

$("#my_id").textContent = "new Value";

Может быть, это работает. В противном случае попробуйте: 

document.getElementById("my_id").textContent = "new Value";
3 голосов
/ 30 мая 2011

Способ доступа к SVG зависит от того, как именно вы включите его в свою страницу. Вы можете либо использовать элемент object или embed и ссылку на SVG, либо включить его на странице. Обратите внимание, что включение его через элемент img не будет работать - SVG будет рассматриваться как «черный ящик» изображения, вы не сможете получить доступ к внутренней структуре.

Встраивание через объект является простым и будет работать во всех браузерах, которые поддерживают SVG: 

<object id="svg_object" width="672" height="243" data="myimage.svg" type="image/svg+xml">
    No SVG support
</object>

Затем, чтобы получить внутреннюю структуру, вам нужно получить contentDocument: 

var svg = $('svg_object').contentDocument;
var svgel = svg.getElementById('myid');

Обратите внимание, что внутренний DOM SVG не будет автоматически расширяться при помощи prototype.js в этом случае, поэтому вам придется использовать обычные методы DOM.

Внедрение SVG непосредственно в страницу будет работать, если вы обслуживаете свою страницу как application/xhtml+xml или если браузер имеет парсер, совместимый с HTML5 (Firefox 4, Chrome, IE9, но не Opera или более ранний Firefox). Однако теперь ваши методы prototype.js будут работать напрямую с элементами SVG, что делает некоторые вещи намного проще: 

var svgel = $('myid');

Я сделал несколько примеров: object , inline . Они работают для меня в Firefox 4, вам, возможно, придется немного поработать, чтобы заставить их работать в других браузерах (с оговорками, упомянутыми выше, что касается поддержки).

0 голосов
/ 30 мая 2011

SVG - это документ на основе XML, которым вы можете манипулировать с помощью javascript, точно так же, как манипулируете документами XHTML.

getElementById будет работать с SVG так же, как и с xhtml, так что вам будет трудно его изменитьтекст в SVG динамически.

...