Добавление фильтра к изображению SVG внутри другого изображения SVG - PullRequest
Новая
       36

Добавление фильтра к изображению SVG внутри другого изображения SVG

2 голосов
/ 06 марта 2019

У меня есть следующая разметка: 

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

Применение фильтра к img кажется, что не работает. Любое решение?

1 Ответ

4 голосов
/ 06 марта 2019

Почему вы заключаете HTML-тег img в элемент svg ??- Майкл Маллани

HTML-тег <img> должен быть выведен из SVG.Только определение фильтра должно оставаться внутри SVG.

Ниже приведен пример использования отдельного файла SVG, загруженного на сервер, который добавляется в разметку HTML с помощью тега <img>

Фильтр применяется к файлу 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>
...