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

Question

我有以下标记:

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

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

Answer 1

Why are you wrapping a HTML img tag within a svg element?? – Michael Mullany

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>