Question

我有一段代码，在Chrome中它运行得非常好，它有一个由PHP for循环中的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)'

这允许其他浏览器在某种程度上通过简单的动作工作，但这样做也会失去闪光性

我需要知道如何保持原始代码的原始闪烁并修改所有附加样式块，以便在Chrome以外的浏览器中仍然出现更少的闪烁最近几天我一直在苦苦挣扎，这是我提出的最好的但是我确实失去了华而不实的镀铬方面，所以结果不是最好的。

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

在原始代码中，循环中的第一个代码块导致图形全部以0的比例显示，或者循环的所有迭代都没有开始，因为迭代发生时x位置和y位置都增加了由于animateTransform导致的比例结果是图形块全部从0,0开始变换为全尺寸（1,1），因为它们沿着x和y轴移动。 y轴在迭代的早期变化停止，因此它看起来像一个拉链被关闭，拉链的下半部分是稳定的（y运动的结束），并且刻度和x位置的平移是拉链的另一半

闪光指的是拉链效果或缺少拉链效果

为了使其与跨浏览器兼容，我必须添加样式标记，这会破坏Chrome中的整个拉链效果。

现在比例在开始时设置为全尺寸（1,1），并且所有迭代都显示在x = 0，y = 0，并且它根据样式标记的变化简单地向下滑动到样式标记之后的位置。 x和y。最终结果是外观相同但没有拉链效果。

拉链正在工作，因为在原始代码中，animateTransform在循环内运行，没有它可以，因为没有任何变换它从scale（1,1）开始并在那里结束。

如果没有样式块的原始代码到位，则不显示图像，因为比例始终为零，而其他浏览器不理解SVG块的animateTransform属性

Answer 1

你说PHP中的循环会产生多个多边形元素。根据您显示的内容，它们都有.sq { display: inline-block; height: 90px; width: 120px; margin-right: -3px; text-align: center; font-size: 40px; padding-top: 30px; cursor: pointer; font-family: sans-serif; transition: background 0.3s; vertical-align: top; }，这是无效的XML，ID必须是唯一的。

要获得您想要达到的效果，请改用id="tester"并将CSS选择器更改为class="tester"。

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

1 个答案: