При использовании SVG с AngularJS я столкнулся с странным поведением. Я использую службу $routeProvider
для настройки моих маршрутов. Когда я помещаю этот простой SVG в свои шаблоны, все в порядке:
<div id="my-template">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect fill="red" height="200" width="300" />
</svg>
// ...
</div>
Но когда я добавляю фильтр, с этим кодом, например:
<div id="my-template">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="blurred">
<feGaussianBlur stdDeviation="5"/>
</filter>
</defs>
<rect style="filter:url(#blurred)" fill="red" height="200" width="300" />
</svg>
</div>
Тогда:
- Он работает на моей домашней странице .
- В 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()
.
Есть ли у кого-то представление о том, что происходит?