角度和SVG滤镜

Question

将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是可见的，但根本不会模糊。

当我手动（使用Firebug）删除filter样式时，SVG再次可见。

这是路由配置：

$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

请注意，尽管Chrome可在Firefox中“运行”，但我无法在Fiddle中重现该问题。

我试图用来创建我的整个SVG都无济于事document.createElementNS()。

有人对发生的事情有想法吗？