Transition on fill image using SVG

Question

Im trying to achieve a smooth transition effect on image, after the vivus.js making a stroke it should do a smooth transition of image when it appears but its unfortunely not. With colors works great, but cant figure why its not working with image? live example:

 new Vivus('hexagon', {type: 'delayed', duration: 160}, function(){ $('#hex').attr('style', 'fill: url(#img); webkit-transition: fill 1.2s; -moz-transition: fill 1.2s; transition: fill 1.2s;') });

 #hexagon { width: 110px; height: 110px; position: absolute; left: 50%; top: 8%; margin-left: -55px; } #hex, #img { stroke: #DC3522; stroke-width: 2; fill: transparent; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.1/vivus.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> </head> <body> <svg id = "hexagon" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100"> <image xlink:href="http://graphicloads.com/wp-content/uploads/2014/11/iron-man-illustration.png" x="-25" width="150" height="100" /> </pattern> </defs> <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" /> </svg> </body>

thanks for any help

Answer 1

Try this one :)

 new Vivus('hexagon', {type: 'delayed', duration: 160}, function(){ $('#ironman').attr('style', '-webkit-animation:fillthis 0.3s forwards') });

 #hexagon { width: 110px; height: 110px; position: absolute; left: 50%; top: 8%; margin-left: -55px; } @-webkit-keyframes fillthis { from{ opacity:0 } to { opacity:1 } } #hex, #img { stroke: #DC3522; stroke-width: 2; fill:url(#img) } image{ opacity:0 }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.1/vivus.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> </head> <body> <svg id = "hexagon" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100"> <image id="ironman" xlink:href="http://graphicloads.com/wp-content/uploads/2014/11/iron-man-illustration.png" x="-25" width="150" height="100" /> </pattern> </defs> <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" /> </svg> </body>

Transition on fill image using SVG

Question

1 answers

solution1
2 ACCPTED 2016-11-02 03:35:32

Transition on fill image using SVG

Question

1 answers

solution1 2 ACCPTED 2016-11-02 03:35:32

solution1
2 ACCPTED 2016-11-02 03:35:32