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

Dla specjalistów Webmastering
#1

Zrobiłem to:

http://codepen.io/look997/pen/kBwyG

Pierwsza rzecz:

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

http://codepen.io/look997/pen/dIhCK

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.

#2

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

#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)

#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