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>

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

1 个答案: