是否可以通过css或javascript更改svg元素中png图像的颜色？

Question

codepen-mydemo

.icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  overflow: hidden;
}
.icon-del {
  background: url("http://i1.piimg.com/567571/220defbd8306acf8.png") no-repeat center;
}
.icon > .icon {
  position: relative;
  left: -80px;
  border-right: 80px solid transparent;
  -webkit-filter: drop-shadow(80px 0);
  filter: drop-shadow(rgb(204, 51, 255) 80px 0);
}
.imgicon1 {
  -webkit-filter: drop-shadow(80px 0);
  filter: drop-shadow(rgb(204, 51, 255) 80px 0);
}

<p><strong>origin icon</strong>
</p>
<i class="icon icon-del"></i>
<p><strong>after change icon color</strong>
</p>
<i class="icon"><i class="icon icon-del"></i></i>
<br />
<br />
<p>can i use the same way to change the icon color in svg image below</p>
<svg x=200 y=200 width=500 height=500>
  <defs>
    <filter id="f1" x="0" y="0" width="100%" height="100%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
    <filter id="f2" x="0" y="0" width="100%" height="100%">
      <feImage result="sourc12eTwo" xlink:href="http://i1.piimg.com/567571/220defbd8306acf8.png" preserveAspectRatio="xMidYMid slice" />
      <!--            <feOffset result="offO12ut"  dx="0" dy="0" fill="red"/>
          <feOffset in="SourceGraphic" dx="60" dy="60" color="red"/> -->
      <!--           <feFlood flood-color="red" flood-opacity="1" result="offsetColor"/> -->
      <!--            <feFlood flood-color="rgb(20, 0, 0)" result="color"/> -->



      <!--           <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> -->
      <!--           <feBlend in="SourceGraphic" in2="offOut" mode="normal" /> -->

      <!--     <feComposite in="SourceGraphic" in2="sourceTwo" operator="arithmetic" k1="0" k2=".5" k3=".7" k4="0"/> -->
    </filter>
  </defs>

  <image filter="url(#f1)" class="imgicon1" xlink:href="http://i1.piimg.com/567571/220defbd8306acf8.png" />
  <!--         <image class="imgicon2" xlink:href="http://i1.piimg.com/567571/220defbd8306acf8.png" class="testicon" x=200 y=0 /> -->
  <rect x=300 y=0 width="80" height="80" filter="url(#f2)" />
</svg>

我们可以通过更改元素的 drop-shadow(css3 filter)'color 来更改 HTML 中 png 的颜色。

所以我想知道我是否可以通过相同的方式更改 svg(image tag) 中引用的 png 的颜色。在阅读了MDN 上相关的 svg 过滤器 API 后，我发现没有办法像上面那样改变阴影的颜色。

有什么好的解决方案可以解决这个问题吗？

Answer 1

您可以使用 feColorMatrix 滤镜更改图像的颜色。

.icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  overflow: hidden;
}
.icon-del {
  background: url("http://i1.piimg.com/567571/220defbd8306acf8.png") no-repeat center;
}
.icon > .icon {
  position: relative;
  left: -80px;
  border-right: 80px solid transparent;
  -webkit-filter: drop-shadow(80px 0);
  filter: drop-shadow(rgb(204, 51, 255) 80px 0);
}

.imgicon1 {
  -webkit-filter: drop-shadow(80px 0);
  filter: drop-shadow(rgb(204, 51, 255) 80px 0);
}

.imgicon2 {
  -webkit-filter: url(#f2);
  filter: url(#f2);
}

<p><strong>origin icon</strong>
</p>
<i class="icon icon-del"></i>
<p><strong>after change icon color</strong>
</p>
<i class="icon"><i class="icon icon-del"></i></i>
<br />
<br />
<p>can i use the same way to change the icon color in svg image below</p>
<svg x=200 y=200 width=500 height=500 color-interpolation-filters="sRGB">
  <defs>
    <filter id="f1" x="0" y="0" width="100%" height="100%">
      
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
    
    
    <filter id="f2" x="0" y="0" width="100%" height="100%">
      <feColorMatrix type="matrix" values="0 0 0 0 0.82
                                           0 0 0 0 0.21 
                                           0 0 0 0 1 
                                           0 0 0 1 0" />
    </filter>
  </defs>

  <image filter="url(#f1)" class="imgicon1" xlink:href="http://i1.piimg.com/567571/220defbd8306acf8.png"  x="0" y="0" height="100" width="100"/>
  
  <image class="imgicon2" xlink:href="http://i1.piimg.com/567571/220defbd8306acf8.png" class="testicon" x="200" y="0" height="100" width="100" /> 
  
</svg>