如何保留尽可能多的 SVG 功能 [关闭]

Question

我有一段在 Chrome 中运行良好的 sn-p 代码，它具有由 PHP for 循环内的 SVG 块创建的拉链效果

这里是代码sn-p

                <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 也失去了浮华

我需要知道如何保持原始代码的原始闪烁度并将附加样式块修改为 all 以减少在除 chrome 之外的浏览器中仍然出现的闪烁度 过去几天我一直在为此苦苦挣扎，这是我想出的最好的，但我确实失去了华丽的 chrome 方面，所以结果不是最好的。

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

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

浮华是指拉链效果或缺乏拉链效果

为了让它尽可能跨浏览器兼容，我不得不添加样式标签，这会在 Chrome 中破坏整个拉链效果。

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

拉链可以工作，因为在原始代码中，animateTransform 在循环内起作用，因为没有任何东西可以转换它，它从比例 (1,1) 开始并在那里结束。

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

Answer 1

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

对于您想要实现的目标，请改用 class="tester" 并将 CSS 选择器更改为 .tester。