获取SVG过滤器以处理CSS背景图像

Question

我创建了一个example，它应该使用SVG过滤器旋转CSS背景图像的颜色通道。用于过滤器的CSS是：

.filt1 {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><filter id=\'filt1\'><feColorMatrix type=\'matrix\' values=\'0 1 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0 0 1 0\'/></filter></svg>#filt1");
}

但是，它在Chrome或Safari中对图像没有影响。

我做错了什么？您是否能够分叉和编辑我的example以使其有效？

图像div的CSS如下：

div {
  background-image: url(http://i.imgur.com/zDPDlNd.jpg);
  background-size: cover;
  background-position: center center;
  position: relative;
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
  width: 300px;
  height: 300px;
  float: left;
  color: white;
}