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

codepen-mydemo

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.

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

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.

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

is there any good solution to solve this problem?

有什么好的解决办法来解决这个问题吗?

1 个解决方案

#1

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

您可以通过使用一个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>