SVG <use> in Chrome non funziona

Question

C'è SAP (AngularJS and Angular Route) con navigazione basata su icone creata da svg-sprite. Così, ho Hava codice inline in questo modo:

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

e le icone di navigazione come questo:

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

Tutto quello che posso vedere in questa navigazione è nulla, <use> ha dimensione 0 × 0 pixel. Conosco Firefox bug with xml:base, ma aggiungendo xml: base non mi ha aiutato. Puoi provare questo esempio: http://css.yoksel.ru/assets/demo/svg-in-firefox/svg-has-base.html

Funziona in Firefox, Safari e altri browser ma non in Chrome 49+ (la versione 48 non ha questo problema).

Answer 1

Stavo riscontrando un problema molto simile a quello che descrivi con una differenza che genererei le mie icone <svg> e <use> in una direttiva.

Ho cercato una risposta per una parte migliore di oggi e ho trovato una soluzione alternativa alla domanda <use> e xlink:href. Che ricrea semplicemente la funzionalità inserendo il svg desiderato.

Per semplicità diciamo che ho <angular-icon> direttiva che riceve il nome dell'icona da un attributo icon-name

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

direttiva ora di lavoro si presenta come segue:

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

Questo è causato da una combinazione della dipendenza di AngularJS da <base href="/" /> e dall'instradamento dell'interfaccia utente, quando l'applicazione non è nello stato "root", il relativo collegamento hash nelloL'elementonon si risolve correttamente.

Per ovviare a questo, è necessario risolvere il xlink:href per utilizzare il percorso assoluto. Si può effettuare le seguenti operazioni:

angolare-icon-template.html

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

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