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

Question

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

在所有浏览器中都没有问题，但在 chrome 和 Android 上，在旋转 svg 的矩形形状周围会生成黑色背景。一旦它就位，黑色背景就会消失。

笔数：https://codepen.io/sashakevich/pen/YVMmZV

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；
启用背景：积累；在父元素上
添加一个 100% 宽度和高度的白色矩形
设置一些大的白色描边，设置无描边，也不玩描边不透明度。

所做的工作是在页面某处创建另一个混合元素。甚至不以任何方式与 svg 交互 FFS！

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

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

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

Mix-blend-mode: weird (temp) black background during SVG animation on android

animation

android

blend

gsap

mix-blend-mode