Question

我在彼此顶上旋转几个矩形，并且使用css的混合混合模式与它们的颜色相互作用。

在所有浏览器中它都很好，但在Android上的Chrome上，在svg的旋转时会在svg的矩形形状周围产生黑色背景。一旦它稳定到位，黑色背景就会消失。

笔：here

HTML：

<svg id="sl_logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.94 62.8"><g id="mark"><rect id="bar-1" class="cls-1" x="20.04" width="12.1" height="56" rx="3.24" ry="3.24"/><rect id="bar-2" class="cls-2" x="20.9" y="0.5" width="12.1" height="56" rx="3.24" ry="3.24" transform="matrix(0.5, 0.87, -0.87, 0.5, 37.29, -9.59)"/><rect id="bar-3" class="cls-3" x="20.9" y="0.5" width="12.1" height="56" rx="3.24" ry="3.24" transform="matrix(-0.5, 0.87, 0.87, 0.5, 15.5, -9.59)"/></g></svg>

的CSS：

#bar-1, #bar-2, #bar-3 {
  mix-blend-mode:multiply;
}
#bar-1 {
  fill:#ed4237;
}
#bar-2 {
  fill:#29aae2;
}
#bar-3 {
  fill:#7ab642;
}

JS

TweenMax.from("#bar-2", .35, {rotation:0, transformOrigin:"center center", delay:.4});
TweenMax.from("#bar-3", .7, {rotation:0, transformOrigin:"center center", delay:.4});
TweenMax.from("#letters", .7, {x:-40, opacity:0, transformOrigin:"left", delay:.4});

任何想法如何让它表现出来？

Answer 1

好的，2小时后我有了解决方案......

如果您想沿着这条路走下去，那么没有什么工作：

不透明度：0;填充不透明度：1;
enable-background：accumulate;在父元素上
添加100％宽度和高度的白色矩形
设置一些较大的白色笔划，不设置笔划，也不使用笔触不透明度。

做了什么工作，是在页面的某个位置创建另一个混合元素。甚至没有以任何方式与svg交互FFS！

.blend-fix {
  mix-blend-mode:multiply;
}

工作笔：https://codepen.io/sashakevich/pen/qmGBBL

混合混合模式：在Android上的SVG动画期间的奇怪（临时）黑色背景

1 个答案: