AngularJS - SVG filters

Simple example for StackOverflow

by Amaury Dalla Monta

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-route.min.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
    <a href="/Blackhole/chehd/TheOtherPage/">The other page</a>
    <div ng-view />
</div>

CSS

svg {
    width: 500px;
    height: 500px;
    
    position: absolute;
    left: 50px;
    top: 50px;
    
    overflow: visible;
}

JavaScript

angular.module('MyApp', ['ngRoute']);

function MyCtrl($scope) {
    $scope.showSvg = true;
}

angular
    .module('MyApp')
    .config(
        [
            '$locationProvider',
            '$routeProvider',
            function ($locationProvider, $routeProvider)
            {
                $locationProvider.html5Mode(true);
                
                var templateSvg =
                    '<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" x="10" y="10" height="200" width="300" />' +
                    '</svg>'
                ;
                
                $routeProvider
                    .when('/Blackhole/chehd/2/', {
                            template :
                                '<div>' +
                                    'This is the home page.' +
                                    templateSvg +
                                '</div>',
                    })
                    .when('/Blackhole/chehd/TheOtherPage/', {
                            template :
                                '<div>' +
                                    'This is the other page.' +
                                    templateSvg +
                                '</div>',
                    })
                    .otherwise({
                        redirectTo : '/Blackhole/chehd/2/'
                    })
                ;
            }
        ]
    )
;