css - 如何保留尽可能多的 SVG 功能

Question

关闭。这个问题需要details or clarity .它目前不接受答案。












想改进这个问题？通过 editing this post 添加详细信息并澄清问题.

4年前关闭。




Improve this question




我有一段代码，它在 Chrome 中运行得非常好，它具有由 PHP for 循环内的 SVG block 创建的 zipper 效果

这是代码片段

                <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 中没有那么多

我必须添加这个样式 block ，以便尽可能地模拟其他浏览器中的华而不实的东西

    <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 block 以将原始比例设置为 1,1

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

这允许其他浏览器通过简单的 Action 在某种程度上工作，但这样做 CHROME 也失去了浮华

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

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

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

Flashiness是指 zipper 效果或缺乏 zipper 效果

为了让它尽可能地兼容跨浏览器，我必须添加样式标签，这会杀死 Chrome 中的整个 zipper 效果。

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

zipper 正在工作，因为在原始代码中 animateTransform 在循环内起作用，因为没有什么可以转换它从比例(1,1)开始并在那里结束。

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

Answer 1

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

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