我在使用AngularJS处理SVG时遇到一个奇怪的问题。我正在使用$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 中重现这个问题,虽然在 Firefox 中它“有效”。
我尝试使用 document.createElementNS()
创建整个 SVG,但没有成功。
是否有人知道发生了什么?
rect
是可见的,但没有模糊效果。 - Blackhole