Chrome中的SVG“使用"标签已损坏 [英] SVG 'use' tag in Chrome broken

问题描述

有SAP(AngularJS和Angular Route)，它具有由svg-sprite进行的基于图标的导航.所以，我有这样的内联代码:

There is SAP (AngularJS and Angular Route) with icon-based navigation made by svg-sprite. So, I hava inline code like this:

<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像素.我了解Firefox 使用xml:base 的错误，但是添加xml:base并没有帮助.您可以尝试以下示例: http://css.yoksel.ru/资产/demo/svg-in-firefox/svg-has-base.html

All that I can see in this navigation is nothing, <use> has size 0 × 0 pixels. I know about Firefox bug with xml:base, but adding xml:base didn't help me. You can try this example: http://css.yoksel.ru/assets/demo/svg-in-firefox/svg-has-base.html

它可以在Firefox，Safari和其他浏览器中使用，但不能在Chrome 49+(48版本没有此问题)中使用.

It works in Firefox, Safari and other browsers but not in Chrome 49+ (48 version doesn't have this problem).

推荐答案

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

This is caused by a combination of AngularJS' dependency of <base href="/" /> and UI routing, when the application is not at its "root" state, the relative hash link in the <use> element would not correctly resolve.

要解决此问题，您需要解析xlink:href以使用绝对路径.您可以执行以下操作:

To get around this, you would need to resolve the xlink:href to use absolute path. You may do the following:

angular-icon-template.html

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

angular-icon.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, '');
        }
    });

这篇关于Chrome中的SVG“使用"标签已损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！