异步加载SVG过滤器feColorMatrix在Chrome中工作，而不是在Safari或Firefox中工作

Question

根据用户的日期和时间，我将异步加载SVG过滤器。它在Chrome上运行得很好，但在Safari/Firefox中就不行了。

简化例

1. ：通过单击按钮，我们将把svg-字符串加载到DIV#svg-中：

<img src="http://beta.zonabern.ch/project/uploads/img0136-640x480.jpg" alt="" />

<div id="svg-loader"></div>
<button id="loader">Load</button>

2. CSS:供应商前缀支持filter-属性

img {
  filter: url("#monochrome");
  -webkit-filter: url("#monochrome");
}

3. Javascript/JQuery：通过单击按钮，我模拟了svg-数据的异步加载。

$(function() {
    $( '#loader' ).on( 'click', function() {
        $( '#svg-loader' ).empty().html('<svg class="defs-only"><filter id="monochrome" color-interpolation-filters="sRGB" x="0" y="0" height="100%" width="100%"><feColorMatrix type="matrix" in="SourceGraphic" values="0.33984375 0 0 0 0.66015625 0.4140625 0 0 0 0.5859375 0.3203125 0 0 0 0.6796875 0 0 0 1 0"/></filter></svg>');
    });
});

为了获得更好的可读性，再次使用svg：

<svg class="defs-only">
    <filter id="monochrome" 
            color-interpolation-filters="sRGB" 
            x="0" 
            y="0" 
            height="100%" 
            width="100%">
        <feColorMatrix type="matrix" in="SourceGraphic"
                       values="0.33984375 0 0 0 0.66015625
                               0.4140625  0 0 0 0.5859375
                               0.3203125  0 0 0 0.6796875
                               0          0 0 1 0" />
    </filter>
</svg>

这个过滤器应该把上面的图像变成紫罗兰色的图像.

参见代码示例这里，在Chrome中工作，但在Safari/Firefox中不工作。

Answer 1

我认为最简单的解决方案是将您的filter CSS规则分配给一个类：

.filtered {
  filter: url("#monochrome");
  -webkit-filter: url("#monochrome");
}

然后，只有在SVG加载之后才将该类分配给<img>。

$( '#loader' ).on( 'click', function() {
  $( '#svg-loader' ).empty().html('<svg>...</svg>');
  $("#myimg").addClass("filtered");
});

这里更新了密码。这个工作在FF上。我不能测试Safari，因为我在电脑上。