is it possible to change color of png image in svg element by css or javascript?

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>

we can change color of png in HTML by changing drop-shadow(css3 filter)'color of the element.

so i wonder if i can change the color of png referenced in svg(image tag) by the same way. after reading the related svg filter API on MDN,i found there is no way to change color of drop-shadow like above.

is there any good solution to solve this problem?

Answer 1

You can change the color of an image by using an feColorMatrix filter.

.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>