angularjs – 角度和SVG过滤器

发布时间：2020-12-17 08:41:24 所属栏目：安全来源：网络整理

导读：当使用SVG与AngularJS时，我遇到了一个奇怪的行为。我使用 $routeProvider 服务来配置我的路由。当我把这个简单的SVG在我的模板，一切都很好： div id="my-template" svg xmlns="http://www.w3.org/2000/svg" version="1.1" rect fill="red" height="200" wi

当使用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)过滤器样式时，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。

我试图无法创建我的整个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?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!