SVG <use> dans Chrome ne fonctionne pas

Question

Il existe SAP (AngularJS et Angular Route) avec la navigation basée sur les icônes faite par svg-sprite. Donc, je Hava code en ligne comme ceci:

<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> 

Et les icônes de navigation comme celle-ci:

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

Tout ce que je peux voir dans cette navigation est rien, <use> a une taille 0 × 0 pixels. Je sais à propos de Firefox bug with xml:base, mais l'ajout de xml: base ne m'a pas aidé. Vous pouvez essayer cet exemple:

Il fonctionne dans Firefox, Safari et d'autres navigateurs, mais pas dans Chrome 49+ (version 48 n'a pas ce problème).

Answer 1

J'ai rencontré un problème très similaire à ce que vous décrivez avec une différence que je générerais mes icônes <svg> et <use> dans une directive.

J'ai été à la recherche d'une réponse pour une meilleure partie d'aujourd'hui et est venu avec une solution de contournement à la question <use> et xlink:href. Ce qui recrée simplement la fonctionnalité en insérant le svg voulu.

Par souci de simplicité, disons que j'ai <angular-icon> directive qui reçoit le nom de l'icône par un attribut icon-name

<angular-icon icon-name="{{someObject.iconName}}">

directive de travail se présente maintenant comme suit:

angular.module('angularIcon', []) 
.directive('angularIcon', IconDirective); 

function IconDirective(){ 
    return{ 
     template:'', 
     templateNamespace:'svg', 

     link:function(scope, element, attributes){ 

      // my icon name comes from $http call so it doesnt exist when initialising the directive, 
      attributes.$observe('iconName', function(iconName){ 

       // let's grab the icon from the sprite 
       var icon = angular.element(document.getElementById(iconName)); 
       // let's clone it so we can modify it if we want 
       var iconClone = icon.clone(); 

       var namespace = "http://www.w3.org/2000/svg"; 

       // manually create the svg element and append the inlined icon as no other way worked 
       var svg = document.createElementNS(namespace, 'svg'); 
       svg.setAttribute('viewBox', '0 0 32 32'); 
       svg.setAttribute('xml:space', 'preserve'); 

       svg.appendChild(iconClone[0]); 
       // let's add the newly created svg+icon to the directive's element 
       element[0].appendChild(svg); 

      }); 

     }, 
     scope:{ 
      iconName: '@' 
     } 
    } 
} 

Answer 2

Cette est causée par une combinaison de la dépendance de AngularJS de <base href="/" /> et le routage de l'interface utilisateur, lorsque l'application n'est pas à son état "racine", le lien de hachage relatif dans le <use> l'élément ne serait pas résolu correctement. Pour contourner cela, vous devez résoudre le xlink:href pour utiliser le chemin absolu. Vous pouvez effectuer les opérations suivantes:

-icon-template.html angulaire

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

-angulaire de 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, ''); 
     } 
    });