दिलचस्प पोस्ट
नेटवर्क स्ट्रीम के कुछ कारण क्या हैं। आप अपाचे मैवेन कैश कैसे साफ़ करते हैं? कैसे आर में एक कुंजीपटल के लिए प्रतीक्षा करने के लिए? सी + + समारोह टेम्पलेट आंशिक विशेषज्ञता? PHP में बहुत बड़ी फाइल पढ़ना मैं अपने MySQL संग्रहीत कार्यविधि में लेनदेन का उपयोग कैसे कर सकता हूं? गोलाकार कोनों के साथ एंड्रॉइड में एक दृश्य कैसे बनाएं एक्लिप्स में एंड्रॉइड प्रोजेक्ट का पैकेज नाम कैसे बदल सकता है? आईई 9 सीमा-त्रिज्या और पृष्ठभूमि ढाल खून बह रहा है मैं कैसे देख सकता हूं कि सूची में एक और केवल एक सत्य मान है? कैसे बताओ कि कोई सत्र सक्रिय है या नहीं? क्यों 3 और एक्स (जो 3 को सौंपा गया था) Haskell में अलग अनुमानित प्रकार हैं? javascript regexp सभी विशेष वर्णों को हटा दें जावा खींचें और ड्रॉप SQLite फ़ाइल स्थान कोर डेटा

कोणीय और एसवीजी फिल्टर

एसजीजी के साथ AngularJS का उपयोग करते समय मैं एक अजीब व्यवहार में आया था मैं अपने मार्गों को कॉन्फ़िगर करने के लिए $routeProvider सेवा का उपयोग कर रहा हूं जब मैं अपने टेम्पलेट्स में यह सरल एसवीजी लगाया, तो सब ठीक है:

 <div id="my-template"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect fill="red" height="200" width="300" /> </svg> // ... </div> 

लेकिन जब मैं एक फिल्टर जोड़ता हूं, उदाहरण के लिए इस कोड के साथ:

 <div id="my-template"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="blurred"> <feGaussianBlur stdDeviation="5"/> </filter> </defs> <rect style="filter:url(#blurred)" fill="red" height="200" width="300" /> </svg> </div> 

फिर:

  • यह मेरे मुखपृष्ठ पर काम करता है
  • फ़ायरफ़ॉक्स के साथ, एसवीजी अब अन्य पृष्ठों पर दिखाई नहीं दे रहा है, लेकिन यह अभी भी जगह छोड़ देता है जहां यह होता। क्रोम के साथ, एसवीजी दृश्यमान है, लेकिन बिल्कुल भी धुंधला नहीं है
  • जब मैं मैन्युअल रूप से (फायरबग के साथ) filter शैली को निकालता हूं तो एसवीजी फिर से दिखाई दे रहा है

यहां मार्ग कॉन्फ़िगरेशन है:

 $routeProvider .when('/site/other-page/', { templateUrl : 'view/Site/OtherPage.html', controller : 'Site.OtherPage' }) .when('/', { templateUrl : 'view/Site/Home.html', controller : 'Site.Home' }) .otherwise({ redirectTo : '/' }) ; 

बेला

कृपया ध्यान दें कि मैं फ़्यूडल में क्रोम के साथ समस्या को पुन: उत्पन्न करने में विफल रहा हूं, यद्यपि यह फ़ायरफ़ॉक्स के साथ "काम करता है"

मैंने document.createElementNS() साथ अपना संपूर्ण एसवीजी बनाने के लिए कोई फायदा नहीं उठाया है .createElementNS document.createElementNS()

क्या किसी को पता है कि क्या हो रहा है?

वेब के समाधान से एकत्रित समाधान "कोणीय और एसवीजी फिल्टर"

समस्या

समस्या यह है कि मेरे HTML पृष्ठ में एक <base> टैग है इसलिए, आईआरआई को पहचानने के लिए प्रयोग किया जाता है फ़िल्टर अब वर्तमान पृष्ठ के सापेक्ष नहीं है, लेकिन <base> टैग में दिए गए यूआरएल के लिए।

उदाहरण के लिए यह यूआरएल मेरे होम पेज का यूआरएल भी था, http://example.com/my-folder/

मुख पृष्ठ के अलावा अन्य पृष्ठों के लिए, http://example.com/my-folder/site/other-page/ उदाहरण के लिए, #blurred को पूर्ण यूआरएल http://example.com/my-folder/#blurred गणना किया गया था http://example.com/my-folder/#blurred लेकिन एक साधारण GET अनुरोध के लिए, JavaScript के बिना, और इसलिए AngularJS बिना, यह केवल मेरा आधार पृष्ठ है, जिसमें कोई टेम्प्लेट लोड नहीं किया गया है। इस प्रकार, #blurred फ़िल्टर इस पृष्ठ पर मौजूद नहीं है

ऐसे मामलों में, फ़ायरफ़ॉक्स <rect> प्रस्तुत नहीं करता है (जो सामान्य व्यवहार है , W3C अनुशंसा देखें)। क्रोम बस फिल्टर को लागू नहीं करता है

मुख पृष्ठ के लिए, #blurred को पूर्ण URL http://example.com/my-folder/#blurred भी गणना किया गया है। लेकिन इस बार, यह वर्तमान यूआरएल भी है। कोई GET अनुरोध भेजने की कोई आवश्यकता नहीं है, और इस तरह #blurred फ़िल्टर मौजूद है

मुझे http://example.com/my-folder/ अतिरिक्त अनुरोध देखा जाना चाहिए था, लेकिन मेरे बचाव में, यह जावास्क्रिप्ट फाइलों के लिए अन्य अनुरोधों में बहुत अधिक खो गया था।

समाधान

यदि <base> टैग अनिवार्य है, समाधान एक पूर्ण आईआरआई का उपयोग फ़िल्टर की पहचान करने के लिए करना है। AngularJS की मदद से, यह बहुत सरल है नियंत्रक या निर्देश जो एसवीजी से जुड़ा हुआ है, में $location सेवा इंजेक्षन करें और absUrl() प्राप्तकर्ता का उपयोग करें:

 $scope.absUrl = $location.absUrl(); 

अब, एसवीजी में, बस इस संपत्ति का उपयोग करें:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="blurred"> <feGaussianBlur stdDeviation="5"/> </filter> </defs> <rect style="filter:url({{absUrl}}#blurred)" fill="red" height="200" width="300" /> </svg> 

संबंधित: एचटीएमएल पेज में एक बेस टैग होने पर एसवीजी ग्रेडिएंट काला हो जाता है?

ऐसा लगता है एक व्यवहार मैंने पहले देखा था। मूल कारण यह है कि आप एक ही आईडी (धुंधला) के साथ कई तत्व (फिल्टर) समाप्त करते हैं। अलग-अलग ब्राउज़रों इसे अलग तरह से संभाल …

यहां आपके केस को पुन: उत्पन्न करने के लिए मैंने किया है: http://jsfiddle.net/z5cwZ/ इसमें दो एसटीवी और एक छिपा हुआ है, फ़ायरफ़ॉक्स से कोई नहीं दिखाता है

विवादित आईडी से बचने की दो संभावनाएं हैं पहले आप अपने टेम्पलेट से अनन्य आईडी बना सकते हैं (मैं इसे कोणीय के साथ कठिनाई करने में मदद नहीं कर सकता)। यहां एक उदाहरण है: http://jsfiddle.net/KbCLB/1/

दूसरी संभावना है, और यह angularjs के साथ आसान हो सकता है, व्यक्तिगत svgs ( http://jsfiddle.net/zAbgr/1/ ) के बाहर फ़िल्टर डालना है:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> <defs> <filter id="blurred"> <feGaussianBlur stdDeviation="10" /> </filter> </defs> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none"> <rect style="filter:url(#blurred)" fill="red" height="200" width="300" /> </svg> <br/> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect style="filter:url(#blurred)" fill="red" height="200" width="300" /> </svg> 

बस इस समस्या में भाग गया @ ब्लैकहोल के जवाब से विस्तार, मेरा समाधान एक निर्देश जोड़ने के लिए था जो प्रत्येक भरण गुण के मूल्य को बदलता है।

 angular.module('myApp').directive('fill', function( $location ) { 'use strict'; var absUrl = 'url(' + $location.absUrl() + '#'; return { restrict: 'A', link: function($scope, $element, $attrs) { $attrs.$set('fill', $attrs.fill.replace(/url\(#/g, absUrl)); } }; }); 

मैंने हाल ही में इस मुद्दे पर अपने आप में भाग लिया, अगर एसटीजी विभिन्न मार्गों पर इस्तेमाल किया जाता है तो आपको प्रत्येक स्थान के लिए $ स्थान जोड़ना होगा। इसे लागू करने का एक बेहतर तरीका $ location service के बजाय सिर्फ window.location.href का उपयोग करना है।

इसके अलावा एसवीजी लिंक: hrefs के साथ समस्याएं थीं, और हाँ समस्या <base> – मुझे कड़ी प्रासंगिक संदर्भों से बचने के प्रतिबंधों के कारण निरपेक्ष यूआरएल को सम्मिलित करते समय फेंका गया था।

मेरा समाधान एक ऐसे फिल्टर को लिखना था, जिसने निरपेक्ष यूआरएल को जोड़ा और सम्मिलन पर भरोसा किया।

 angular.module('myApp').filter('absUrl', ['$location', '$sce', function ($location, $sce) { return function (id) { return $sce.trustAsResourceUrl($location.absUrl() + id); }; }]); 

और फिर इसे इस तरह प्रयोग करें: {{'#SVGID_67_' | absUrl} {{'#SVGID_67_' | absUrl}

परिणाम: http://www.example.com/deep/url/to/page#SVGID_67_ और नो $ एसस त्रुटियां