SVG <use> trong Chrome không hoạt động

Question

Có SAP (AngularJS và Tuyến đường) với điều hướng dựa trên biểu tượng được tạo bởi svg-sprite. Vì vậy, tôi HAVA mã nội tuyến như thế này:

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

Và các biểu tượng trong menu như thế này:

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

Tất cả những gì tôi có thể nhìn thấy trong hướng này là không có gì, <use> có kích thước 0 × 0 pixel. Tôi biết về Firefox bug with xml:base, nhưng việc thêm xml: base không giúp tôi. Bạn có thể thử ví dụ này: http://css.yoksel.ru/assets/demo/svg-in-firefox/svg-has-base.html

Nó hoạt động trong Firefox, Safari và các trình duyệt khác nhưng không hoạt động trong Chrome 49+ (phiên bản 48 không có vấn đề này).

Answer 1

Tôi đã gặp sự cố thực sự tương tự với những gì bạn mô tả với sự khác biệt mà tôi sẽ tạo biểu tượng của mình <svg> và <use> theo chỉ thị.

Tôi đã tìm kiếm câu trả lời cho một phần tốt hơn của ngày hôm nay và đã đưa ra giải pháp cho câu hỏi <use> và xlink:href. Mà chỉ đơn giản là tái tạo các chức năng bằng cách nội tuyến svg mong muốn.

Vì lợi ích của sự đơn giản giả sử tôi có <angular-icon> chỉ tiếp nhận tên của biểu tượng bằng một thuộc tính icon-name

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

chỉ làm việc bây giờ trông như sau:

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

này được gây ra bởi sự kết hợp giữa sự phụ thuộc của AngularJS là <base href="/" /> và định tuyến giao diện người dùng, khi ứng dụng không ở trạng thái "gốc", liên kết băm tương đối trong <use> phần tử sẽ không giải quyết chính xác.

Để giải quyết vấn đề này, bạn cần giải quyết xlink:href để sử dụng đường dẫn tuyệt đối. Bạn có thể làm như sau:

góc-icon-template.html

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

góc-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, ''); 
     } 
    });