javascript - Background image for animated SVG Path element -
hello came across interesting looking website :
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
Post a Comment