简化示例

1。 HTML： 通过单击按钮，我们将svg-string加载到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：供应商前缀

支持filter-property

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-Example here，在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");
});

Updated codepen here.这适用于FF。我无法测试Safari，因为我在PC上。

异步加载的SVG-Filter feColorMatrix在Chrome中运行，而不是在Safari或Firefox中运行

简化示例

1 个答案: