The animation in this example (not my code) works in Chrome on my desktop, but not on my laptop. Both are Windows 10 machines running the same version of Chrome. The animation does run on both machines in Firefox.
https://codepen.io/thebabydino/pen/gbyZJO
@import "compass/css3";
@font-face {
font-family: 'HansHand';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/hanshand.ttf') format('truetype');
}
html { background: saddlebrown; }
text {
fill: url(#balloons);
font: 900 3em HansHand;
stroke: lemonchiffon;
stroke-width: 1;
stroke-opacity: .2;
}<svg viewbox='0 0 500 200'>
<pattern id='balloons'
width='30' height='90'
patternUnits='userSpaceOnUse'
viewbox='0 0 120 360'>
<image xlink:href='https://i.imgur.com/LMPphIG.gif' width='60' height='180'/>
</pattern>
<text x='0' y='50'>HAPPY BIRTHDAY</text>
</svg>Is there a better way to ensure using animated GIFs as patterns in SVGs will work as expected?
My Windows versions:
- Desktop (where it works): 10.0.19041 Build 19041
- Laptop (where it doesn't): 10.0.18363 Build 183636
I'm pretty sure I had the same problem when both machines were on the same Windows version, though. Also I hope it's not that!