使用應用過濾器實現svg

我在網站上實現svg文件時遇到問題：如果Inkscape中沒有設置任何過濾器，則每個文件都會顯示正常。導出到.png對於每個文件都能正常工作，但是當我嘗試使用篩選器顯示文件時，不會顯示帶篩選器的svg文件的所有部分。不帶過濾器的文件使用應用過濾器實現svg

例（抱歉的聯繫，但似乎我是不是有足夠的信譽分，發佈圖片...）：

enter image description here

，並與過濾器設置：

enter image description here

正如您所看到的，由於（陰影）過濾器，「上部」不會顯示。

那麼，是否有可能顯示帶有過濾器的svg文件，或者我是否必須使用css-effects作爲陰影效果的例子？

非常感謝

編輯：

這裏是我的HTML：

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

的Javascript我使用SVG：

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

來源

2014-09-27 user2931500

我不認爲陰影過濾器可以使上部消失。你可以發佈SVG的代碼嗎？ – 2014-09-27 10:17:58

我們需要看到svg文件，即favlabel3.svg – 2014-09-28 06:53:00

最可能的解釋是，Inkscape中過濾器正在使用Web瀏覽器不支持的功能，可能是BackgroundImage （允許一個元素上的過濾器與其後的元素結合 - 目前沒有瀏覽器支持它）。

規格不提供過濾器或任何特定錯誤處理準則的任何回退選項。大多數瀏覽器都會通過使過濾圖形消失來響應過濾器中的錯誤，如您所見，如果您嘗試the example SVG from the specs。（與correctly rendered version as a PNG比較。）

您需要找出另一種方法來創建濾鏡效果而不使用背景圖片。

來源

2014-09-28 15:07:40 AmeliaBR

好吧，這正是我所懷疑的，謝謝解釋！ – user2931500 2014-09-29 09:06:06

使用應用過濾器實現svg

回答

相關問題