[CSS][SVG][HTML] Odwrócona maska SVG + na osobnym elemencie


(look997) #1

Zrobiłem to:

Pierwsza rzecz:

Jak filtrem SVG odwrócić w image przeźroczystość w nieprzezroczystość a nieprzezroczystość w przeźroczystość?

Tyle że ta czerwień ma być widoczna w 100%, ale też chciałbym móc to kontrolować w przyszłości.

Chcę odwrócić maskę tak, by cały czerwony div był widoczny a tylko pole ikony było odkryte.

Czyli chcę czerwony prostokąt z wyciętą dziurą w kształcie ikony zalinkowanej z zewnętrznego źródła.

Tych ikon(czyli dziur) będzie wiele.

Druga rzecz(mniej realna):

Chcę aby kształty ikon były wycinane w czerwonym divie, ale za pomocą innego diva umieszczonego wewnątrz tego czerwonego.

Jest to potrzebne ponieważ te ikony-dziury będą dynamicznie przenoszone, przesuwane i interaktywne więc nie mogą być ustawione tylko jako maska jednego elementu.

Może być w czymś innym(canvas?) byle działało w Firefoksie ewentualnie Chrome.


(Kwiat Nocy123) #2

Hej, dowiedziałeś się jak to zrobić ? Bo potrzeban mi taka informacja…


(jacko1998) #3
  1. Nie wiem dokładnie o co biega.

  2. Możesz dla linków ustawić tło z właściwością transparent i wtedy będzie ono zmieniało się dynamicznie, bo zawsze będzie takie jakie ma element pod nim. (Ale nie wiem czy o to Ci chodziło)


(yellow.) #4

Najlepiej sprawdzić w żródle obiektu jak jest skonstruowany i wtedy dopasować do niego odpowiednią konfigurację :smiley:

Dodane 10.08.2013 (So) 17:25

Ja swego czasu też miałem z tym dość poważny problem

Dodane 10.08.2013 (So) 17:29

Ale jak mi wszystko wytłumaczył znajomy informatyk, to to się wszystko wydaje banalnie proste, trzeba tylko znać trochę zaawansowanego języka HTML