क्रोम में एसवीजी <use> काम नहीं करता

Question

एसएपी (एंगुलरजेएस और कोणीय मार्ग) एसवीजी-स्प्राइट द्वारा बनाई गई आइकन-आधारित नेविगेशन के साथ है।

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

और इस तरह नेविगेशन में प्रतीक:: तो, मैं इस तरह इनलाइन कोड hava

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

सभी है कि मैं इस नेविगेशन में देख सकते हैं कुछ भी नहीं है, <use> आकार 0 × 0 पिक्सल है। मुझे फ़ायरफ़ॉक्स bug with xml:base के बारे में पता है, लेकिन एक्सएमएल जोड़ना: आधार ने मेरी मदद नहीं की। आप इस उदाहरण को आजमा सकते हैं: http://css.yoksel.ru/assets/demo/svg-in-firefox/svg-has-base.html

यह फ़ायरफ़ॉक्स, सफारी और अन्य ब्राउज़रों में काम करता है लेकिन क्रोम 49+ में नहीं (48 संस्करण में यह समस्या नहीं है)।

Answer 1

मैं एक अंतर के साथ वर्णन करने के लिए वास्तव में एक ही समस्या का सामना कर रहा था कि मैं अपने आइकन <svg> और <use> निर्देश में उत्पन्न करूंगा।

मैं आज की बेहतर भाग के लिए एक जवाब की तलाश में किया गया है और <use> और xlink:href सवाल का एक समाधान के साथ आया था। जो वांछित svg को रेखांकित करके कार्यक्षमता को पुन: प्रयास करता है।

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

यह:

सरलता के लिए मान लीजिए कि मैं <angular-icon> निर्देश है कि एक विशेषता icon-name

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

काम कर निर्देश अब इस प्रकार दिखता द्वारा आइकन का नाम प्राप्त करता है चलो एंगुलरजेएस की <base href="/" /> और यूआई रूटिंग की निर्भरता के संयोजन के कारण होता है, जब एप्लिकेशन अपने "रूट" स्थिति में नहीं होता है,में रिश्तेदार हैश लिंकतत्व सही ढंग से हल नहीं होगा।

इसके आसपास पाने के लिए, आपको पूर्ण पथ का उपयोग करने के लिए xlink:href को हल करने की आवश्यकता होगी। आप निम्न कार्य कर सकते हैं:

कोणीय आइकन-template.html

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

कोणीय 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, ''); 
     } 
    });