angularjs - Angular 和 SVG 过滤器

Question

在 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

请注意，我未能在 Fiddle 中重现 Chrome 的问题，尽管它在 Firefox 中“有效”。

我尝试使用 document.createElementNS() 创建整个 SVG，但没有成功。

有人知道发生了什么吗？

Answer 1

问题

问题是有一个 <base> 我的 HTML 页面中的标记。因此，IRI用于标识过滤器的不再是相对于当前页面，而是相对于 <base> 中指示的 URL标签。

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

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

在这种情况下，Firefox 不会呈现 <rect> (这是正常行为，请参阅 W3C recommandation )。 Chrome根本不应用过滤器。

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

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

解决方案

如果<base> tag是强制性的，解决方案是使用绝对IRI来识别过滤器。在 AngularJS 的帮助下，这非常简单。在 Controller 或链接到 SVG 的指令中，注入(inject) $location 服务并使用absUrl() setter/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?