Угловые и SVG-фильтры

При использовании SVG с AngularJS я столкнулся с необычным поведением. Я использую службу $routeProvider для настройки маршрутов. Когда я добавляю этот простой SVG в свои шаблоны, все в порядке:

 
// ...

Но когда я добавляю фильтр, например, с этим кодом:

 

Затем:

  • Он работает на моей домашней странице .
  • С Firefox , SVG больше не виден на других страницах , но он все еще оставляет место, где бы это было. С Chrome , SVG видимый, но не размытый вообще.
  • SVG снова отображается, когда я удаляю вручную (с Firebug) стиль filter .

Вот конфигурация маршрутов:

 $routeProvider .when('/site/other-page/', { templateUrl : 'view/Site/OtherPage.html', controller : 'Site.OtherPage' }) .when('/', { templateUrl : 'view/Site/Home.html', controller : 'Site.Home' }) .otherwise({ redirectTo : '/' }) ; 

скрипка

Обратите внимание, что я не смог воспроизвести проблему с Chrome в Fiddle, хотя он «работает» с Firefox.

Я попытался без толку создать весь SVG с document.createElementNS() .

Кто-то имеет представление о том, что происходит?

Проблема

Проблема в том, что на моей странице HTML есть тег . Поэтому IRI, используемый для идентификации фильтра, больше не относится к текущей странице, а к URL-адресу, указанному в .

Этот URL также был URL моей домашней страницы, например http://example.com/my-folder/ .

Например, для страниц, отличных от главной страницы, http://example.com/my-folder/site/other-page/ , #blurred был вычислен на абсолютный URL http://example.com/my-folder/#blurred . Но для простого запроса GET без JavaScript и, следовательно, без AngularJS это просто моя базовая страница без загрузки шаблона. Таким образом, фильтр #blurred не существует на этих страницах.

В таких случаях Firefox не отображает (что является нормальным поведением , см. Рекомендацию W3C ). Chrome просто не применяет фильтр.

Для домашней страницы #blurred также вычисляется по абсолютному URL-адресу http://example.com/my-folder/#blurred . Но на этот раз это также текущий URL. Нет необходимости отправлять запрос GET, и, следовательно, существует фильтр #blurred .

Я должен был увидеть дополнительный запрос на http://example.com/my-folder/ , но в свою защиту он был потерян во множестве других запросов к файлам JavaScript.

Решение

Если является обязательным, решение должно использовать абсолютный IRI для идентификации фильтра. С помощью AngularJS это довольно просто. В controllerе или в директиве, связанной с SVG, введите службу определения $location и используйте absUrl() getter:

 $scope.absUrl = $location.absUrl(); 

Теперь, в SVG, просто используйте это свойство:

         

Связано: SVG Gradient становится черным, если на HTML-странице есть тег BASE?

Это похоже на поведение, которое я наблюдал раньше. Основная причина заключается в том, что вы получаете несколько элементов (фильтров) с одним и тем же идентификатором (размытым). Различные браузеры обрабатывают это по-другому …

Вот что я сделал, чтобы воспроизвести ваше дело: http://jsfiddle.net/z5cwZ/ У него есть два svg, а один скрыт, firefox ничего не показывает.

Есть две возможности избежать конфликтующих идентификаторов. Сначала вы можете создавать уникальные идентификаторы из своего шаблона (я не могу не делать этого с жестким углом). Вот пример: http://jsfiddle.net/KbCLB/1/

Вторая возможность, и может быть проще с помощью angularjs, заключается в том, чтобы поместить фильтр за пределы отдельных svgs ( http://jsfiddle.net/zAbgr/1/ ):

           

Просто столкнулся с этой проблемой. Расширяясь от ответа @ Blackhole, моим решением было добавить директиву, которая изменяет значение каждого атрибута fill.

 angular.module('myApp').directive('fill', function( $location ) { 'use strict'; var absUrl = 'url(' + $location.absUrl() + '#'; return { restrict: 'A', link: function($scope, $element, $attrs) { $attrs.$set('fill', $attrs.fill.replace(/url\(#/g, absUrl)); } }; }); 

Недавно я столкнулся с этой проблемой, если svg используется на разных маршрутах, вам нужно будет добавить $ location к каждому пути. Лучший способ реализовать это – просто использовать window.location.href вместо службы $ location.

Также были проблемы с svg link: hrefs, и да, проблема в том, что из-за – у меня были ошибки, возникающие при объединении абсолютного URL из-за ограничений Strict Contextual Escaping .

Мое решение состояло в том, чтобы написать фильтр, который добавил абсолютный URL-адрес, а также доверял конкатенации.

 angular.module('myApp').filter('absUrl', ['$location', '$sce', function ($location, $sce) { return function (id) { return $sce.trustAsResourceUrl($location.absUrl() + id); }; }]); 

И затем используйте его следующим образом: {{'#SVGID_67_' | absUrl} {{'#SVGID_67_' | absUrl}

Результат: http://www.example.com/deep/url/to/page#SVGID_67_ и без ошибок $ sce

  • SVG-анимация не работает на IE11
  • Измените файл svg с помощью jQuery
  • Selenium WebDriver : как нажимать на элементы в SVG с помощью XPath
  • Цвет фона текста в SVG
  • CSS: прежде чем на встроенном SVG
  • Как включить стиль CSS при преобразовании svg в png
  • Доступность: рекомендуемое соглашение об альт-тексте для SVG и MathML?
  • Вставить SVG в SVG?
  • Как масштабировать SVG-изображение, чтобы заполнить окно браузера?
  • Создание SVG из LaTeX (tikz)?
  • Как я могу конвертировать SVG-файлы, содержащие текст в файлы PDF (в частности, CentOS 5.3 x86_64)?
  • Interesting Posts

    Как получить информацию о принтере в .NET?

    Facebook не будет предоставлять ссылку на мой сайт

    Как проверить случайность (пример – перетасовка)

    Platform.runLater и задача в JavaFX

    Макет сетки с реагирующими квадратами

    ASP.NET Есть ли лучший способ найти элементы управления, которые находятся в пределах других элементов управления?

    Как получить параметр URL в Express?

    Что добавляет эти многоадресные IP-адреса в таблицу ARP, как статические записи?

    Как файл .bat может быть «преобразован» в .exe без сторонних инструментов?

    AppFresh-подобное программное обеспечение для Windows?

    Когда ssh'ing, как я могу установить переменную среды на сервере, которая изменяется от сеанса к сеансу?

    Какова стоимость использования автореферата в cocoa?

    Сделать mcrypt доступным для PHP 5.3 на Mac OS X 10.6

    Bypass GeneratedValue в спящем режиме (данные объединить не в db?)

    Получить индекс типа элемента кортежа?

    Давайте будем гением компьютера.