CSS或JavaScript是否可以改变SVG元素中PNG图像的颜色？

Question

CSS或JavaScript是否可以改变SVG元素中PNG图像的颜色？

6

.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滤镜)来在HTML中更改PNG的颜色。

所以我想知道是否可以通过相同的方式改变SVG中引用的PNG的颜色。在阅读MDN上的相关SVG滤镜API之后，我发现没有办法像上面那样改变drop-shadow的颜色。

有没有好的解决方案来解决这个问题？

- BruceWang

SVG滤镜将应用于SVG图像元素，就像CSS滤镜一样。请提供您的翻译尝试，我们可以进行修正。 - Robert Longson

@RobertLongson 谢谢，我已经添加了我的演示。 - BruceWang

1

你需要在你的<image>元素上设置宽度和高度属性。 - Kaiido

是的，你可以... - JohnC

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Mullany · Accepted Answer

您可以使用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>