angularjs - Angular and SVG filters -

i came accross strange behaviour when using svg angularjs. i'm using $routeprovider service configure routes. when put simple svg in templates, fine:

<div id="my-template">     <svg xmlns="http://www.w3.org/2000/svg" version="1.1">         <rect fill="red" height="200" width="300" />     </svg>     // ... </div>

but when add filter, code instance:

<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>

then:

it works on homepage.
with firefox, svg isn't visible anymore on the other pages, still leaves space have been. chrome, svg visible, not blurred @ all.
the svg visible again when remove manually (with firebug) filter style.

here routes configuration:

$routeprovider     .when('/site/other-page/', {             templateurl : 'view/site/otherpage.html',             controller : 'site.otherpage'     })     .when('/', {             templateurl : 'view/site/home.html',             controller : 'site.home'     })     .otherwise({         redirectto : '/'     }) ;

fiddle

please notice i've failed reproduce problem chrome in fiddle, although "works" firefox.

i've tried no avail create whole svg document.createelementns().

does has idea of happening?

the problem

the problem there <base> tag in html page. therefore, iri used identify filter not anymore relative current page, url indicated in <base> tag.

this url url of home page, http://example.com/my-folder/ instance.

for pages other home page, http://example.com/my-folder/site/other-page/ example, #blurred computed absolute url http://example.com/my-folder/#blurred. simple request, without javascript, , therefore without angularjs, base page, no template loaded. thus, #blurred filter doesn't exist on pages.

in such cases, firefox doesn't render <rect> (which is normal behaviour, see w3c recommandation). chrome doesn't apply filter.

for home page, #blurred computed absolute url http://example.com/my-folder/#blurred. time, current url. there no need send request, , #blurred filter exists.

i should have seen additional request http://example.com/my-folder/, in defense, lost in plethora of other requests javascript files.

the solution

if <base> tag mandatory, solution use absolute iri identify filter. of angularjs, pretty simple. in controller or in directive linked svg, inject $location service , use absurl() getter:

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

now, in svg, use property:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">     <defs>         <filter id="blurred">             <fegaussianblur stddeviation="5"/>         </filter>     </defs>     <rect style="filter:url({{absurl}}#blurred)" fill="red" height="200" width="300" /> </svg>

Search This Blog

Living