使用应用过滤器实现svg

Question

我在网站上实现svg文件时遇到问题：如果在Inkscape中没有设置过滤器，则每个文件都显示正常。导出到.png适用于每个文件，但是当我尝试显示带过滤器的文件时，不会显示带过滤器的svg文件的所有部分。

没有过滤器的文件示例（对不起链接，但似乎我没有足够的信誉点来发布图片......）：

并使用过滤器设置：

如您所见，由于（阴影）过滤器而未显示“上部”。

那么，是否可以使用滤镜显示svg文件，或者我是否必须使用css效果作为阴影效果？

非常感谢

编辑：

这是我的HTML：

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

我用于svg的Javascript：

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

最可能的解释是Inkscape过滤器正在使用Web浏览器不支持的功能，可能BackgroundImage（允许一个元素上的过滤器与其后面的元素组合 - 目前没有浏览器支持它） 。

规范不提供过滤器的任何后备选项或任何特定的错误处理指南。大多数浏览器通过使过滤后的图形消失来响应过滤器中的错误，您可以看到是否尝试the example SVG from the specs。 （与correctly rendered version as a PNG比较。）

您需要找出一种在不使用背景图像的情况下创建滤镜效果的替代方法。