javascript - Troubles with animation svg mask (crossbrowser) -
i have trouble cross browser svg mask animation. explain behaviour in firefox, ie , webkits? , of course me please without special libs.
html:
<svg class="svg-defs"> <defs> <mask id="mask"> <circle r="10" cx="150" cy="150" class="c-mask-circle animation" id="cmc"/> </mask> </defs> </svg> <svg width="900" height="300">> <g mask="url(#mask)"> <image xlink:href="http://wonderfulengineering.com/wp-content/uploads/2016/01/los-angeles-wallpaper-37-1024x640.jpg" x="20" y="50" width="300" height="200" /> </g> </svg>
css:
.svg-defs {position: absolute;width: 0;height: 0;} .c-mask-circle { fill: white; stroke: white; stroke-width: 1; } .animation{ animation: stroke-width 10s; } @keyframes stroke-width { 100% { stroke-width: 170; } }
Comments
Post a Comment