在将 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 中“有效”。
我试图用document.createElementNS()
.
有人知道发生了什么吗?