向另一个 SVG 图像内的 SVG 图像添加滤镜

Question

我有以下标记：

<svg>
  <img src="path/to/another/image.svg" />
</svg>

应用过滤器似乎img不起作用。有什么解决办法吗？

Answer 1

为什么要在 svg 元素中包装 HTML img 标签？— 迈克尔·穆拉尼

HTML 标签<img>需要从 svg 中渲染出来。只有过滤器定义应保留在 svg 中。

下面是使用SVG上传到服务器的单独文件的示例，该文件使用<img>标记 添加到 HTML 标记

过滤器应用于文件 svg<feFlood flood-color =" #35B62E"/>以绿色着色

我曾经<feOffset dy =" 150 ">在形状上部分绘制。

img {
filter:url(#filter1);
}

<img src="https://svg-art.ru/files/Face.svg" width="371" height="348" >

<svg  version="1.1" width="371" height="348" viewBox="0 0 371 348" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <filter id="filter1" x="0%" y="0%">
      <feFlood flood-color="#35B62E" />
      <feOffset  dy="150">
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>
   </defs>
 
</svg>

下面是一个示例，<feFlood flood-color当您悬停光标时，使用两个过滤器来获得颜色变化

img {
filter:url(#filter_G);
}

img:hover {
filter:url(#filter_R);
}

<img src="https://svg-art.ru/files/Face.svg" width="371" height="348" >

<svg  version="1.1" width="371" height="348" viewBox="0 0 371 348" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <filter id="filter_G" x="0%" y="0%">
      <feFlood flood-color="#35B62E" />
      <feOffset  dy="150">
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter> 
	
  <filter id="filter_R" x="0%" y="0%">
      <feFlood flood-color="red" />
      <feOffset  dy="65">
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>	
   </defs>
 
</svg>