Директивы Angular не отображаются в SVG

Я провожу эксперименты с Angular и SVG.

Я создал простую директиву и пытаюсь отобразить <text> элементов из шаблона.

Сначала это вообще не работало, но я нашел эту интересную ссылку: Включение шаблона SVG в директиву Angularjs, и я включил этот svgService. Он отлично работает для всего, что я тестировал, кроме одного. Отсутствует содержимое тегов <text>.

Я пытался изменить код функции compile в директиве, но безуспешно. Я не эксперт в DOM.

Вот планкер.

Код не выдает ошибок. Мне пришлось добавить несколько тестов, чтобы убедиться, что rawElement не определен. Моя проблема заключается в том, что дочерний узел (который представляет содержимое <text>) действует иначе, чем другие узлы. Почему это так? И как я могу исправить эту функцию? Спасибо.

РЕДАКТИРОВАТЬ: текст отображается в Chromium, но не в Firefox. Есть ли способ заставить его работать в Firefox?


javascript svg dom angularjs angular-services
person Paco    schedule 13.12.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы должны использовать textContent, а не innerText для копирования текстовых данных, т.е.

    // set the text from the template
    if(rawElement.localName === 'text'){
        replacement.textContent = rawElement.textContent;
    }

Firefox не поддерживает нестандартное свойство innerText, только совместимый со стандартами textContent.

person Robert Longson    schedule 15.12.2014
comment
Я назначу награду завтра. (Сегодня не могу) - person Paco; 15.12.2014

arrow_upward
0
arrow_downward

Мне кажется, что ваш код работает просто отлично. Проблема, которую я обнаружил, заключается в том, что значения x и y для AAAA не находятся внутри видимой области. Я изменил код, чтобы он выглядел так.

<text
    fill="#000000"
    x="0"
    y="5">
    AAAA
</text>

Оно появилось в поле зрения. Пара вещей, которые следует учитывать, — это размер видимой области и расположение элементов внутри видимой области. Я надеюсь, что это помогает вам.

person Adobe Flex Coder 0622    schedule 13.12.2014
comment
Я изменил координаты текста, как вы предложили, но я все еще не могу увидеть текст AAA, сейчас попробую в Chrome (в firefox не получилось). РЕДАКТИРОВАТЬ: Возможность видеть весь текст в хроме. Но в Firefox он просто показывает текст (который не является частью директивы) и SVG Below (который не является частью SVG). - person Paco; 14.12.2014