My code snippet works smoothly in Chrome, featuring a zipper effect created by the SVG block inside a PHP for loop.
Here is the code snippet:
<g transform='translate(0,-2)'>
<polygon transform='scale(0, 0)'
id='tester'
points='".$blk*$x.",".$yy." ".($blk*$x+40).",".$yy." ".($blk*$x+50).",".($yy+10)." ".($blk*$x+40).",".($yy+20)." ".$blk*$x.",".($yy+20)." ".($blk*$x+20).",".($yy+10)."'
style='stroke:none;
fill:#ffff00;'
style='fill: #ffff00'>
<animateTransform attributeName='transform'
type='scale'
to='1, 1'
begin='".($x/15)."s'
dur='.5s'
fill='freeze'
/>
</polygon>
</g>
Though it works in Chrome, Firefox, Safari, and IE/Edge do not execute the zipper effect as desired. To mimic the flashy effect across all browsers, I had to include additional styles.
<style>
#tester {
-webkit-animation:mover .5s;
animation: mover .5s;
}
@keyframes mover {
0% {
transform: scale (0);
-webkit-transform: scale(0);
}
100% {
transform: scale (1);
-webkit-transform: scale(1);
}
}
</style>
I also had to adjust the SVG block to have an original scale of 1,1 for compatibility with other browsers. However, this resulted in losing the flashiness in Chrome.
To maintain the original flair while catering to different browser requirements remains challenging. Any suggestions on how to achieve this balance would be greatly appreciated.
The initial code included a loop that scaled the graphics from zero to full size resulting in a zipper-like effect. For cross-browser functionality, I added a style tag which unfortunately altered the display in Chrome.
Currently, all iterations start at x=0, y=0 and smoothly transition into place following the style parameters based on changes in x and y. While the end result looks consistent, the zipper effect is lost.
Your understanding and guidance on preserving the original chrome-esque zippering effect while retaining cross-browser compatibility would be highly valued.