Chrome 中的 SVG“使用”标签已损坏

SAP（AngularJS 和 Angular Route）具有由 svg-sprite 制作的基于图标的导航。所以，我有这样的内联代码：

<div style="height: 0; width: 0; position: absolute; visibility: hidden">
<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon-grid-32" viewBox="0 0 32 32">
        <g stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round">
            <path d="M2 2h11v11H2zM19 2h11v11H19zM2 19h11v11H2zM19 19h11v11H19z"/>
        </g>
    </symbol>
</svg>
</div>

导航中的图标如下所示：

<a href=""><svg class="icon icon-32 outline black"><use xlink:href="#icon-grid-32"></use></svg></a>

我在这个导航中看到的一切都是空的，<use>大小为 0 × 0 像素。我了解火狐浏览器xml:base 的错误 https://bugzilla.mozilla.org/show_bug.cgi?id=652991，但添加 xml:base 对我没有帮助。你可以尝试这个例子：http://css.yoksel.ru/assets/demo/svg-in-firefox/svg-has-base.html http://css.yoksel.ru/assets/demo/svg-in-firefox/svg-has-base.html

它适用于 Firefox、Safari 和其他浏览器，但不适用于 Chrome 49+（48 版本没有此问题）。

这是由 AngularJS 的依赖组合引起的<base href="/" />和UI路由，当应用程序不处于“根”状态时，相对哈希链接<use>元素无法正确解析。

要解决这个问题，您需要解决xlink:href使用绝对路径。您可以执行以下操作：

角度图标模板.html

<svg class="c-icon" viewBox="0 0 32 32">
    <use xlink:href="" ng-attr-xlink:href="{{baseUrl + '#' + iconName}}" />
</svg>

角度图标.js

angular.module('angularIcon', [])
    .directive('angularIcon', {
        templateUrl: 'angular-icon-template.html',
        scope: { iconName: '@' },
        controller: function($scope) {
            $scope.baseUrl = window.location.href.replace(window.location.hash, '');
        }
    });