我如何保持尽可能多的SVG功能

Question

我有一个代码段，它在chrome中起作用非常好，它具有由php内部的svg块创建的拉链效应

这是代码段

                <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>

这是在一个for循环的内部，我说的是在chrome中起作用，但是在firefox safari ie/edge中不是那么多

我必须添加此样式块才能模拟最好的东西，我可以在其他浏览器中浮华

    <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>

除此之外，我还必须修改SVG块以使原始比例为1,1

<polygon transform='scale(1, 1)'

这允许其他浏览器通过简单运动进行某种操作

我需要知道如何维护原始代码的原始闪光，并将其他样式块修改为所有人，以使较小的闪光仍然发生在浏览器中以外的浏览器在过去的几天里，我一直在苦苦挣扎，这是我想到的最好的，但是我确实失去了浮华的方面，所以结果不是最好的。

要回答第一个评论，我编辑了这个问题，并在评论中添加了我所要求的信息，但将它们全部移动到这里：

在原始代码中，循环中的第一个代码块导致图形以0的比例为0或没有任何迭代的所有迭代开始，因为迭代发生了x位置，y位置和y位置增加了由于AnimateTransform，其比例的结果是，图形块沿0,0刻度开始，沿着X和Y轴移动时，将图形块转化为全尺寸(1,1(。Y轴的变化在迭代的早期停止了，因此它看起来像是一个拉链，拉链的下半部分是稳定的(Y运动的末端(，并且在尺度和x位置上的翻译是拉链的另一半。

闪光是指拉链效应或缺乏

为了使其像我所能添加的样式标签一样兼容，以杀死了Chrome中的整个拉链效果。

现在，该比例设置为一开始(1,1(的全尺寸，并且所有迭代均显示为x = 0，y = 0，并且根据样式标签的位置，它只是按照样式标签的位置，x和y。最终结果是相同的外观，但没有拉链效果。

拉链之所以工作，是因为在原始代码中，动画在循环内部功能不可能，因为没有什么可以转换为刻度(1,1(，并且也结束了。

如果没有样式块的原始代码，则不会出现图像，因为该比例始终为零，而其他浏览器不了解SVG块的AnimAtetransform属性

Answer 1

您说PHP中的循环会产生多个多边形元素。根据您显示的内容，它们都有id="tester"，这不是有效的XML，ID必须是唯一的。

为了实现目标，请改用class="tester"，然后将CSS选择器更改为.tester。