时间戳

首页 > 解决方案 > 将过滤器添加到另一个 SVG 图像内的 SVG 图像

html - 将过滤器添加到另一个 SVG 图像内的 SVG 图像

问题描述

我有以下标记：

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

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

标签： htmlcsssvgcss-filters

解决方案

为什么要在 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>

推荐阅读