異步加載的SVG過濾器feColorMatrix在Chrome中工作，而不在Safari或Firefox中工作

Question

我正在根據用戶的日期和時間異步加載SVG過濾器。 它可以在Chrome上正常運行，但不能在Safari / Firefox中運行。

減少例子

1. HTML：通過單擊按鈕，我們將svg字符串加載到DIV＃svg-loader中：

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

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

2. CSS：供應商前綴支持過濾器屬性

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

3. Javascript / JQuery ：通過單擊按鈕，我模擬了svg-data的異步加載。

$(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>

此濾鏡應將上面的圖像變成紫羅蘭色的圖像。

請參閱此處的Codepen示例，該示例可在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。 我在PC上，因此無法測試Safari。