将过滤器添加到另一个 SVG 图像内的 SVG 图像答案

【问题标题】：Adding filter to SVG image inside another SVG image将过滤器添加到另一个 SVG 图像内的 SVG 图像
【发布时间】：2019-03-06 02:52:42
【问题描述】：

我有以下标记：

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

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

【问题讨论】：

请create a Minimal, Complete, and Verifiable example。
为什么要在 svg 元素中包装 HTML img 标签？？
如果您打算在 svg 元素中使用图像，请使用 <image xlink:href.... 而不是 <img src="...

标签： html css svg css-filters

【解决方案1】：

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

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

以下是使用单独的SVG 文件上传到服务器的示例，该文件使用<img>tag 添加到 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>

【讨论】：

@Nerver Corameiro 如果解决方案对您有用，请将其标记为解决方案