javascript - Background image for animated SVG Path element -


hello came across interesting looking website :

http://digitalbakery.org/

i wonder how did provide background image animated svg path elements?

i have tried set background image svg before. did not work. looking in dom see in fact images , svg entirely separated. img in ul element specified somewhere.

is path element, when hover, has opacity reduced 0 hence revealing img underneath? if cannot seem figure out how exact location worked out. how can effect achieved?

i have used named clippath crop images. simplest example:

<svg id="playout">     <g>         <clippath id="hex-mask">             <path d="..."></path>         </clippath>     </g>     <image x="..." y="..." xlink:href="..." **clip-path="url(#hex-mask)"** /> </svg> 

location calculates container's vertexes.


Comments

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

customize file_field button ruby on rails -

SoapUI on windows 10 - high DPI/4K scaling issue -