关闭。这个问题需要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 属性
最佳答案
您说 PHP 中的循环会产生多个多边形元素。根据你显示的,他们都有id="tester"
,这不是有效的 XML,ID 必须是唯一的。
对于您想要实现的目标,请使用 class="tester"
而是将 CSS 选择器更改为 .tester
.
关于css - 如何保留尽可能多的 SVG 功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48831328/