적용된 필터로 svg 구현하기

Question

웹 사이트에서 svg 파일을 구현하는 데 문제가 있습니다. Inkscape에 필터가 설정되어 있지 않으면 모든 파일이 잘 표시됩니다. .png로 내보내기가 모든 파일에서 잘 작동하지만 필터가있는 파일을 표시하려고 할 때 필터가있는 svg 파일의 모든 부분이 표시되지 않습니다. 필터없이 파일의

예 (... 링크 미안하지만 내가 이미지를 게시 할 충분한 명성 포인트를 가지고 aint을 보인다) :

:

및 필터 세트

보시다시피, (그림자) 필터로 인해 "윗부분"이 표시되지 않습니다.

그래서 필터가있는 svg 파일을 표시 할 수 있습니까? 예를 들어 그림자 효과와 같은 CSS 효과를 사용해야합니까?

많은 감사

편집 :

<img class="svg" src="img/favlabel3.svg"> 

자바 스크립트가 내가 SVG 사용 : 여기

내 HTML이다는

jQuery('img.svg').each(function(){ 
    var $img = jQuery(this); 
    var imgID = $img.attr('id'); 
    var imgClass = $img.attr('class'); 
    var imgURL = $img.attr('src'); 

    jQuery.get(imgURL, function(data) { 
     // Get the SVG tag, ignore the rest 
     var $svg = jQuery(data).find('svg'); 

     // Add replaced image's ID to the new SVG 
     if(typeof imgID !== 'undefined') { 
      $svg = $svg.attr('id', imgID); 
     } 
     // Add replaced image's classes to the new SVG 
     if(typeof imgClass !== 'undefined') { 
      $svg = $svg.attr('class', imgClass+' replaced-svg'); 
     } 

     // Remove any invalid XML tags as per http://validator.w3.org 
     $svg = $svg.removeAttr('xmlns:a'); 

     // Replace image with new SVG 
     $img.replaceWith($svg); 

    }, 'xml'); 
}); 

Answer 1

가장 그럴듯한 설명은 잉크 스케이프 필터입니다 아마도 웹 브라우저에서 지원되지 않는 기능인 BackgroundImage을 사용하고 있습니다. (한 요소의 필터가 그 요소 뒤의 요소와 결합 할 수 있습니다. 현재 브라우저가 지원하지 않습니다).

사양에는 필터에 대한 대체 옵션이나 특정 오류 처리 지침이 없습니다. the example SVG from the specs을 시도하면 볼 수 있듯이 대부분의 브라우저는 필터링 된 그래픽을 사라지게하여 필터의 오류에 응답합니다. correctly rendered version as a PNG와 비교하십시오.

배경 이미지를 사용하지 않고 필터 효과를 만들려면 다른 방법을 찾아야합니다.