使用应用过滤器实现 svg答案

【问题标题】：Implementing svg with applied filter使用应用过滤器实现 svg
【发布时间】：2014-11-22 06:58:18
【问题描述】：

我在网站上实现 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');
});

【问题讨论】：

我不认为阴影滤镜可以使上半部分消失。你能发布SVG的代码吗？
我们需要查看svg文件，即favlabel3.svg

标签： html svg filter

【解决方案1】：

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

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

您需要找到一种替代方法来创建滤镜效果而不使用背景图像。

【讨论】：