Angularjs 角度和SVG滤波器

在将SVG与AngularJS一起使用时，我遇到了一个奇怪的行为。我正在使用该服务配置我的路由。当我将这个简单的SVG放在模板中时，一切都很好：

// ...

但是，当我添加一个过滤器时，例如使用以下代码：

然后：

• 它在我的主页上运行
• 在Firefox中，SVG在其他页面上不再可见，但仍保留了空间。使用Chrome，SVG是可见的，但一点也不模糊
• 当我手动（使用Firebug）删除

  过滤器

  样式时，SVG再次可见

以下是路由配置：

$routeProvider
.when（“/site/other page/”{
templateUrl:'view/Site/OtherPage.html'，
控制器：“Site.OtherPage”
})
。当（“/”{
templateUrl:'view/Site/Home.html'，
控制器：“站点。主页”
})
.否则({
重定向到：'/'
})
;

请注意，尽管Chrome可以在Firefox上“工作”，但我没有用小提琴再现Chrome的问题

我试图用

document.createElements（）

创建我的整个SVG，但没有任何效果

---

有人知道发生了什么吗？

这看起来像是我以前观察到的一种行为。根本原因是您最终拥有具有相同id（模糊）的多个元素（过滤器）。不同的浏览器处理它的方式不同

以下是我为复制你的案例所做的： 它有两个svg，一个是隐藏的，firefox没有显示

有两种可能避免ID冲突。首先，您可以从模板生成唯一的ID（我无法帮助使用angularjs）。以下是一个例子：

第二种可能性是，将过滤器放在单个SVG（）之外，使用angularjs可能更容易：

这看起来像是我以前观察到的行为。根本原因是您最终拥有具有相同id（模糊）的多个元素（过滤器）。不同的浏览器处理它的方式不同

以下是我为复制你的案例所做的： 它有两个svg，一个是隐藏的，firefox没有显示

有两种可能避免ID冲突。首先，您可以从模板生成唯一的ID（我无法帮助使用angularjs）。以下是一个例子：

第二种可能性是，将过滤器放在单个SVG（）之外，使用angularjs可能更容易：

问题 问题是我的HTML页面中有一个标记。因此，用于标识筛选器的URL不再与当前页面相关，而是与

标记中指示的URL相关

这个URL也是我主页的URL，

http://example.com/my-folder/

例如

对于主页以外的页面，

http://example.com/my-folder/site/other-page/

例如，

#fuzzle

被计算为绝对URL

http://example.com/my-folder/#blurred

。但是对于一个简单的GET请求，没有JavaScript，因此没有AngularJS，这只是我的基本页面，没有加载模板。因此，此页面上不存在

#模糊的
过滤器

在这种情况下，Firefox不会呈现
（这是的正常行为，请参阅）。Chrome根本不应用过滤器

对于主页，
#fuzzle
也计算为绝对URL
http://example.com/my-folder/#blurred
。但这一次，这也是当前的URL。无需发送GET请求，因此存在
#fuzzle
过滤器

我应该看到对
http://example.com/my-folder/
，但在我的辩护中，它丢失在对JavaScript文件的大量其他请求中

解决方案
如果
标签是必需的，则解决方案是使用绝对IRI来识别过滤器。在AngularJS的帮助下，这非常简单。在控制器或链接到SVG的指令中，注入服务并使用
absUrl（）
getter:

$scope.absUrl=$location.absUrl（）；

现在，在SVG中，只需使用以下属性：




相关：
问题
问题是我的HTML页面中有一个标记。因此，用于标识筛选器的URL不再与当前页面相关，而是与
标记中指示的URL相关

这个URL也是我主页的URL，
http://example.com/my-folder/
例如

对于主页以外的页面，
http://example.com/my-folder/site/other-page/
例如，
#fuzzle
被计算为绝对URL
http://example.com/my-folder/#blurred
。但是对于一个简单的GET请求，没有JavaScript，因此没有AngularJS，这只是我的基本页面，没有加载模板。因此，此页面上不存在
#模糊的
过滤器

在这种情况下，Firefox不会呈现
（这是的正常行为，请参阅）。Chrome根本不应用过滤器

对于主页，
#fuzzle
也计算为绝对URL
http://example.com/my-folder/#blurred
。但这一次，这也是当前的URL。无需发送GET请求，因此存在
#fuzzle
过滤器

我应该看到对
http://example.com/my-folder/
，但在我的de中
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
    <defs>
        <filter id="blurred">
            <feGaussianBlur stdDeviation="10" />
        </filter>
    </defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
    <rect style="filter:url(#blurred)" fill="red" height="200" width="300" />
</svg>
<br/>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect style="filter:url(#blurred)" fill="red" height="200" width="300" />
</svg>

angular.module('myApp').directive('fill', function(
    $location
) { 'use strict';
    var absUrl = 'url(' + $location.absUrl() + '#';

    return {
        restrict: 'A',
        link: function($scope, $element, $attrs) {
            $attrs.$set('fill', $attrs.fill.replace(/url\(#/g, absUrl));
        }
    };
});

angular.module('myApp').filter('absUrl', ['$location', '$sce', function ($location, $sce) {
    return function (id) {
        return $sce.trustAsResourceUrl($location.absUrl() + id);
    };
}]);