CODEWITHSUNDEEP
htmlcsssvgcss-filters
Nerver Corameiro
Nerver Corameiro

Reputation: 160

Adding filter to SVG image inside another SVG image

I have following markup:

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

Applying filter to img seems that doesn't work. Any solution?

Upvotes: 3

Views: 1459

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14545

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

HTML tag <img> needs to be rendered out from svg. Only filter definition should remain inside svg.

Below is an example of using a separate SVG file uploaded to a server, which is added to HTML markup using the<img>tag

The filter is applied to the file svg <feFlood flood-color =" #35B62E"/> for coloring in green color

I used <feOffset dy =" 150 "> to partially paint over the shape. 

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>

Below is an example using two <feFlood flood-color filters to get a color change when you hover the cursor 

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>

Upvotes: 6

Related Questions