$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)过滤器样式时，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 : '/'
})
;
请注意，我没有重现的Chrome在一个小提琴的问题，虽然它“工作”与Firefox。
我试图无法创建我的整个SVG与document.createElementNS()。
有人知道发生了什么吗？
问题是在我的HTML页面中有一个<base>标记。因此，用于识别过滤器的IRI不再相对于当前页面，而是相对于在< base>中指示的URL。标签。
此网址也是我的首页的网址，例如http://example.com/my-folder/。
对于主页之外的其他网页，例如http://example.com/my-folder/site/other-page/，#blurred计算为绝对网址http://example.com/my-folder/ #模糊。但对于一个简单的GET请求，没有JavaScript，因此没有AngularJS，这只是我的基本页面，没有模板加载。因此，#blurred筛选器不存在于此网页上。
在这种情况下，Firefox不会呈现< rect> (这是正常的行为，参见W3C recommandation)。 Chrome不会应用过滤器。
对于主页，#blurred也计算为绝对网址http://example.com/my-folder/#blurred。但这一次，这也是当前的URL。没有必要发送GET请求，因此#blurred过滤器存在。
我应该看到http://example.com/my-folder/的额外请求，但在我的辩护，它失去了对JavaScript文件的大量其他请求。
解决方案
如果< base>标签是必须的，解决方案是使用绝对IRI来标识过滤器。在AngularJS的帮助下，这是很简单。在控制器或链接到SVG的指令中，注入$location服务并使用absUrl()getter：
$scope.absUrl = $location.absUrl();
现在，在SVG中，只需使用此属性：
<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>
相关：SVG Gradient turns black when there is a BASE tag in HTML page?
